更新列表 state 后反應沒有更新組件（通過鈎子）

Question

當使用 useState 掛鈎存儲 object 列表時（例如 [{ a:1 }, { a:2 }]），如果我更改列表的元素（對象）的內容，請不要更新組件。

---

例如在下面的代碼中，

如果我按下第一個按鈕，第一個 h1 組件的內容將為 24。但是即使我按下第一個按鈕，第一個 h1 組件組件也不會更新。

如果我在按下第一個按鈕后按下第二個按鈕，組件會更新。

const [tempList, setTempList] = useState([
  { a: 1 },
  { a: 2 }
])


return (
  <div>
    {
      tempList.map((item, idx) => {
        return <h1>{item.a}</h1>
      })
    }
    <button onClick={() => {
      let temp = tempList;
      temp[0]['a'] = 24
      setTempList(temp)
    }}>modify list</button>
    <button onClick={() => {setTempList(...tempList, {a: 3})}}>insert list</button>
  </div>
)

---

我已經使用了 useReducer 鈎子。 但這不是解決方案。 如何更新組件？

Answer 1

當 state 或 props 更改時，React 重新渲染組件。 並且僅通過查看 state 的 memory 地址即可確定 state 發生了變化。

在第一個按鈕的回調中，通過聲明變量temp ，您只是創建了tempList數組的淺表副本。 因此，即使修改了第一個object，數組的id並沒有改變，react也不知道state已經改變了。

此外，通過在setState function 中放置回調，您始終可以對當前的 state 有新的引用：

const [state, setState] = useState(0);
setState(state+1) <-- the state can be stale
setState(state=>state+1) <-- increment is guaranteed

嘗試構建另一個數組：

<button onClick={()=>{
  setTempList(tempList=>tempList.map((item,ind)=>{
    if(ind===0){
      return {a:24};
    }
    else{
      return item;
    }
  })
}}>modify list</button>

您在第二個回調中有語法錯誤。 除了修復之外，我再次建議將回調 function setTempList function。

<button onClick={() => {
  setTempList(tempList=>[...tempList, {a: 3}])
}}>insert list</button>

Answer 2

您似乎正在更新 object 的相同參考，而不是推送新的 object。 嘗試這個 -

const [tempList, setTempList] = useState([
  { a: 1 },
  { a: 2 }
])


return (
  <div>
    {
      tempList.map((item, idx) => {
        return <h1>{item.a}</h1>
      })
    }
    <button onClick={() => {
      let temp = [...tempList];
      temp[0] = { a: 24 };
      setTempList(temp)
    }}>modify list</button>
    <button onClick={() => {setTempList(...tempList, {a: 3})}}>insert list</button>
  </div>
)