Javascript 迭代-轻松修改数据结构

我必须从数据中呈现一组输入，这相当简单：

const[myInputs，setMyInputs]=useState（[{id:1，值：'foo'}，{id:2，值：'bar'}，…）
myInputs.map（{id，value}）=>

问题是，如果我想添加一个

onChange

函数，我必须找到我的对象，将其从数组中删除，用新值创建一个新对象，并将其插入到相同的位置，我想对数据进行的每一次修改都是如此

---

是否有更好的方法来实现相同的效果（有一个iterable，我可以单独修改每个值）？

将数组转换为键值对。例如：

{id: 1, value: 'foo'},{id: 2, value: 'bar'}

将是

 const obj = {1: 'foo', 2: 'bar'}

因此，使用id可以删除、更新或添加对象

delete obj[1]; //delete
obj[2] = 'new bar'; //update
obj[3] = 'new val'; //add

同样对于渲染，您可以执行Object.keys（obj）并将其映射到元素。

如下操作：

const [myInputs, setMyInputs] = useState({
  nameOfInput1: {
    id: 1, 
    value: 'foo'
  },
  nameOfInput2: {
    id: 2, 
    value: 'bar'
  }, 
})

Object.entries(myInputs).forEach(([key, field]) => (
    <input 
      key={field.id} 
      value={field.value} 
      onChange={(newValue) => setMyInputs({ ...myInputs, key: { ...field, value: newValue } })} 
    />
)

const[myInputs，setMyInputs]=useState({
输入名称1：{
id:1，
值：“foo”
},
输入名称2：{
id:2，
值：“bar”
}, 
})
Object.entries（myInputs）.forEach（（[key，field]）=>(
setMyInputs（{…myInputs，键：{…字段，值：newValue}}}）
/>
)

可以工作，但对象没有索引，因此这并不理想