Question

我必须使用非常简单的数据来呈现输入数组：

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

myInputs.map(({id, value}) => <input key={id} value={value} />

问题是，如果我想添加一个onChange函数，我必须找到我的对象，将其从数组中删除，使用新值创建一个新对象，并将其插入到相同的位置，我想对数据进行的其他所有修改。

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

Answer 1

这样做：

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

Answer 2

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

{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)并将其映射到元素。

反复过度和轻松修改数据结构

2 个答案: