如何正确更新反应钩子状态中的数组

Posted 2023-02-22

【中文标题】如何正确更新反应钩子状态中的数组

【英文标题】：How to properly update an array inside a react hook state

【发布时间】：2020-07-12 13:41:45

【问题描述】：

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

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

这里是代码

国家：

const [items, setItems] = useState([ name: "", quantity: "", unit: "" ]);

变更处理函数（更新状态的函数）：

const nameChange = (e, i) => 
  const newItems = items;
  newItems[i].name = e.target.value;
  setItems(newItems);
  console.log(items);
;

输入：

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

【参考方案1】：

    const [items, setItems] = React.useState(
        name: '',
        quantity: '',
        unit: ''
    );
    const handleChange = prop => event => 
        setItems( ...items, [prop]: event.target.value );
    ;

在您的文本字段上：

    <TextField onChange=handleChange('name')/>
    <TextField onChange=handleChange('quantity')/>

更新：如果 items 是一个数组：

    const updateItem = (prop, event, index) => 
        const old = items[index];
        const updated =  ...old, [prop]: event.target.value 
        const clone = [...items];
        clone[index] = updated;
        setItems(clone);
    

在您的文本字段上：

items.map((item, i) => (
    <div key=i>
        <TextField onChange=e => updateItem('name', e, i)/>
        <TextField onChange=e => updateItem('quantity', e, i)/>
        <TextField onChange=e => updateItem('unit', e, i)/>
    </div>
))

【讨论】：

items 应该是一个数组，就像问题 bcs 我使用它通过迭代它来呈现一些输入，所以这个不起作用，你可以再次修改它:(

我更新了你的情况的答案，主要思想是将状态设置为新对象，它对你有用吗？

它成功了！谢谢老兄，现在我有另一个问题（与此不同）我在单击时添加了一个按钮，它应该删除其父 div（div key='i >

）所以基本上我会将 i 作为参数传递到删除功能，但找不到任何方法从项目数组中删除正确的对象，每当我尝试时，它都会做一些不同的事情，比如删除单击按钮下的所有项目或其他类似的东西，如果你想帮助我，我会提出问题并将链接发送给您

告诉我按钮和你的删除功能也许我可以给你正确的方法，让我们用你的新代码提出一个问题：D

这里是问题的链接：***.com/questions/60977463/…