如何替换useState中的Array？答案

【问题标题】：How to replace Array in useState?如何替换useState中的Array？
【发布时间】：2021-09-18 22:34:40
【问题描述】：

我想让程序通过用户的选择改变表格内容。所以我把空数组放在useState中，像这样。

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

并选择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>

当我选择选项时，数据将被更改。但我不知道如何使用 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);
    }
}

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

有没有每次改变整个数组的函数或方法？

【问题讨论】：

await setStatInfo( await 什么都不做..
console.log(statInfo); statInfo 不会在下一行更改，它将在下一次渲染中更改。您可能需要阅读有关 React 渲染生命周期的更多信息。
如果你使用数组作为状态，你应该像这样改变它：setStatInfo([...statInfo, newElement])
感谢您指出。我只是在修复它的路上！您的意思是，该值正确进入了 useState 但未反映在 console.log 中？

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

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

你应该有这样的选择：

<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 value={value} onChange={handleChange}>

我需要将函数放入花括号 {} 中，以便 React 可以区分 Javascript（大括号内）和 JSX。

在此之后，您可以返回组件（我假设您正在使用函数组件）：

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>
    );

【讨论】：

【解决方案2】：

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

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

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

它不是复制粘贴的答案，但我相信你可以使用它。

【讨论】：

【解决方案3】：

我猜你可以在你的 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)

【讨论】：