在 React 中使用 useState 更新多个数组对象值答案

【问题标题】：Updating multiple array object values with useState in React在 React 中使用 useState 更新多个数组对象值
【发布时间】：2020-08-31 09:19:48
【问题描述】：

感觉我快要解决这个问题了，但不确定如何使用 useState 更新给定对象数组中的所有值。这是一个例子：

    const [data, setData] = useState([
       {key: 1,
        value: 25},
       {key: 2,
        value: 30}
        ])

然后假设在单击按钮时，我想将 10 添加到数组中每个项目的值：

    const handleClick = () => {

    const newData = data.map(item => item.value + 10)

     setData ([
         ...data, ???

     ])

newData 提供了一个更新的数组，但我不确定如何使用 Hook 来更新状态。谢谢！

【问题讨论】：

标签： arrays reactjs react-hooks

【解决方案1】：

您应该将 setData 设置为地图迭代的结果。应该是这样的：

const handleClick = () => {

   const newData = data.map(item => item.value + 10)

   setData(newData)
}

【讨论】：

【解决方案2】：

您可以使用functional state updater 并返回映射结果。另请注意，由于每个值都是一个对象，因此您必须仅克隆和更新 值字段

 const handleClick = () => {
     setData (prevData => data.map(item => ({...item, value: item.value+10})));
}

按照你的方式来说，就像

const handleClick = () => {

    const newData = data.map(item => { 
          return {...item, value: item.value + 10}
    });

     setData(newData);
}

【讨论】：

就是这样。非常感谢！