如何替换useState中的Array？

Question

我想制作 table 内容被用户 select 更改的程序。所以我把空数组放在useState中，像这样。

    const [statInfo, setStatInfo] = useState([]);

和select html代码：

                    <select
                        name="statSelect"
                        onChange={(e) => {
                            handleChange(e);
                            setStat();
                        }}>
                        <option value="0to60">무각 60</option>
                        <option value="1to60">1각 60</option>
                        <option value="2to60">2각 60</option>
                    </select>

当我select选项时，数据会被改变。但我不知道如何使用 useState 来做到这一点。这些是数据

    const stat = [
         [11421, 1059, 782, "10%", "50%", "10%", "25%"],
         [11992, 1112, 821, "15%", "55%", "20%", "30%"],
         [10401, 1114, 1049, "20%", "30%", "35%", "25%"]
    ];

还有我的 React 代码：

    async function setStat() {
    console.log('calling');
    if (stat === "무각 60") {
        await setStatInfo(stat[0]);
        console.log(statInfo);
    } else if (stat === "1각 60") {
        await setStatInfo(stat[1]);
        console.log(statInfo);
    } else {
        await setStatInfo(stat[2]);
        console.log(statInfo);
    }
}

我试过使用地图。但是我也不知道怎么用map

是否有每次更改整个数组的功能或方法？

Answer 1

我猜你可以在你的 handleChange 中处理这个动作：

  handleChange(e) {
    stat.forEach(async (att) => {
      if(att === e.target.value){
        await setStatInfo(att)
      }
    })
  }

如果你不能并且想使用你的 setStat 函数，我想你可以做类似的东西：

 setStat = async (e) => {
   stat.forEach(async (att) => {
     if(att === e.target.value){
       await setStatInfo(att)
     }
   })
 }

并在你的 onChange

中调用 this.setStat(e)

Answer 2

没有理由在函数 setStat 中使用异步（如果我错了请纠正我！）。

你应该select像这样：

<select onChange={handleChange}>
     <option value="grapefruit">Grapefruit</option>
     <option value="lime">Lime</option>
     <option value="coconut">Coconut</option>
</select>

然后你可以有 handleChange 更新状态的函数：

handleChange = (event) => {
    if(event.target.value === "grapefruit"){
        setStatInfo([...stat[0]]);
    } else if (event.target.value === "lime"){
        setStatInfo([...stat[1]]);
    } else if (event.target.value === "coconut"){
        setStatInfo([...stat[2]]);
    }
}

请注意，我使用的是箭头函数（常规函数不起作用）。而在react中，我们不调用函数，我们传递函数。

您还可以为 select 设置默认值。例如，

const [value, setValue] = useState("default value");

然后将其传递到您的 select 表单中：

<select value={value} onChange={handleChange}>

我需要将函数放在大括号 {} 中，这样 React 才能区分 Javascript（大括号内）和 JSX。

在此之后，您可以return组件（我假设您使用的是函数组件）：

return (
      <form onSubmit={handleSubmit}>
         <select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
        <input type="submit" value="Submit" />
      </form>
    );

Answer 3

要仅将数组的某些索引更新为表达式，我会使用 Array.prototype.map() 和索引：

const indexToUpdate = 1;
const newValue = 'foo';

setStatInfo(statInfo.map(
  (value, index) => index === indexToUpdate ? newValue : value
));

它不能用于复制粘贴答案，但我相信你可以利用它。

如何替换useState中的Array？

How to replace Array in useState?

javascript

arrays

reactjs

react-hooks

use-state