ReactJS使用useState管理对象数组时如何在表单onChange中存储值

实现代码 #

直接按如下写法修改onChange函数即可：

const onChange = event => {
  const { name, value, id } = event.target;
  setChoosenVar(prevState => {
    // 拷贝原状态数组，遵循不可变数据原则
    const newArr = [...prevState];
    // 计算对应数组索引：posto1对应下标0，posto2对应下标1，以此类推
    const targetIndex = Number(id) - 1;
    const targetKey = `posto${id}`;
    // 更新对应位置的对象，保留原有其他属性的写法如下，不需要可以直接赋值{name, value}
    newArr[targetIndex] = {
      [targetKey]: {
        ...newArr[targetIndex][targetKey],
        name,
        value
      }
    };
    return newArr;
  });
};

补充说明 #

• 采用函数式更新状态的写法，能避免状态异步更新导致的闭包问题，保证每次拿到的都是最新的状态值
• 如果posto${id}对象不存在其他需要保留的扩展属性，可以简化赋值逻辑为newArr[targetIndex] = { [targetKey]: {name, value} }
• 注意状态更新函数名称大小写要和定义的setChoosenVar保持一致，避免拼写错误导致更新失败

内容的提问来源于stack exchange，提问作者Jack23