使用扩展运算符使用反应挂钩更新地图函数内部的状态

【问题标题】：Updating the state inside map function using react hooks using spread operator使用扩展运算符使用反应挂钩更新地图函数内部的状态
【发布时间】：2020-02-11 05:15:34
【问题描述】：

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

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

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

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

如何更新这样的值？

【问题讨论】：

标签： javascript arrays reactjs react-hooks

【解决方案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]

【讨论】：

所以不切片就不能改变值？就像我们使用扩展运算符处理对象然后为属性分配新值一样