Question

感觉我很沮丧地要解决这个问题，但是不确定如何使用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来更新状态。谢谢！

Answer 1

您可以使用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);
}

Answer 2

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

const handleClick = () => {

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

   setData(newData)
}

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

2 个答案: