javascript - 如何正确更新 react 钩子(Hook)状态中的数组

Question

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

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

这里是代码

国家:

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

Answer 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>
))}