小编awr*_*an5的帖子

如何在反应钩子状态内正确更新数组

我一直在尝试更新表示反应状态的数组中的对象,当输入的值更改时应该更新对象,我可以自己找到更新它的方法,但我不确定这是正确的方法,因为当我打开 React 开发工具并转到组件选项卡并单击我正在处理的组件时,状态不会在输入输入时立即更新,并且为了查看更改我必须单击开发工具中的另一个组件,然后返回到第一个组件并完成更改。

所以我基本上是在问我用来更新状态的方式是否正确,并获得一些关于更好的方法的建议,以便它立即更新。谢谢

这是代码

国家:

const [items, setItems] = useState([{ name: "", quantity: "", unit: "" }]);
Run Code Online (Sandbox Code Playgroud)

更改处理函数(更新状态的函数):

const nameChange = (e, i) => {
  const newItems = items;
  newItems[i].name = e.target.value;
  setItems(newItems);
  console.log(items);
};
Run Code Online (Sandbox Code Playgroud)

输入:

{
  items.map((item, i) => {
    return (
      <div key={i} className={`mt3 ${classes.root}`}>
        <TextField
          onChange={e => nameChange(e, i)}
          style={{ width: "30%" }}
          id="standard-basic"
          label="Item name"
        />
        <TextField
          style={{ width: "25%" }}
          id="standard-basic"
          label="quantity"
        />
        <TextField
          style={{ width: "10%" }}
          id="standard-basic"
          label="Unit"
        />
      </div>
    );
  }); …
Run Code Online (Sandbox Code Playgroud)

javascript arrays state reactjs react-hooks

2
推荐指数
1
解决办法
3984
查看次数

标签 统计

arrays ×1

javascript ×1

react-hooks ×1

reactjs ×1

state ×1