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