使用扩展运算符使用反应钩子更新映射函数中的状态

Question

在映射函数中使用 useState 钩子后，如何使用 useState 钩子更新数组中的值？

目前我有一个 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]