在 React 中使用 useState 更新多个数组 object 值

Question

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

    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 来更新 state。 谢谢！

Answer 1

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

 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);
}

Answer 2

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

const handleClick = () => {

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

   setData(newData)
}