javascript - 使用扩展运算符使用 react 钩子(Hook)更新映射函数内的状态

Question

在 map 函数中使用 useState 钩子(Hook)后，如何更新数组内的值？

目前我有一个可以工作的handleChange函数，但我想直接在输入字段的onChange内部使用setState()。

const [array, setArray] = useState([1,2,3]);

{array.map((v,i) => {<input onChange={(e)=>setArray([...array, ...v, e.target.value])}/>})}

如何更新这样的值？

Answer 1

我建议反对它，因为在我看来，这样的一行行会使代码非常难以阅读。

无论如何，这里是......

{array.map((v,i) => {
  <input onChange={
    (e)=>setArray(
      [...array.slice(0, i), e.target.value, ...array.slice(i+1)]
    )}
  />
})}

<小时/>

给定数组[1,2,3,4,5]和i=2，您将得到:

• ...array.slice(0, i) → [1,2]
• e.target.value → 新值
• ...array.slice(i+1) → [4,5]