使用扩展运算符使用反应挂钩更新 map function 内部的 state

Question

在我在 map function 中使用后，如何使用 useState 钩子更新数组内的值？

目前我有一个handleChange function 可以工作，但我想直接在输入字段的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]