當我需要實現某個外部屬性變化，更新表格的某一列，所有值均為變化後的值,應該如何實現

龙陌發表於2024-03-18

在這裡，將tableData新增到useEffect的依賴陣列會導致無限迴圈。因為在useEffect內部更新了tableData狀態，每次狀態改變又會觸發useEffect再次執行，形成無限迴圈。

解決這個問題的一種方法是，在狀態更新時建立一個新的陣列，而不是直接修改現有陣列。這樣就不會觸發依賴陣列中tableData的變更檢測。

useEffect(() => {
  // 更新表格資料，將columnToUpdate列的值設定為externalProp
  const updatedTableData = tableData.map(row => ({
    ...row,
    columnToUpdate: externalProp,
  }));

  // 使用 [...tableData] 建立一個新的陣列，避免直接修改tableData導致無限迴圈
  setTableData([...updatedTableData]);
}, [externalProp]); // 不需要將tableData作為依賴項，因為我們並沒有直接修改它

// 注意：這種情況下，externalProp變化時，tableData不會立刻更新，而是等到下一次渲染週期才更新

然而，在這個特定場景下，由於我們在每次externalProp變化時都希望更新tableData中所有行的columnToUpdate列，實際上沒有必要將tableData作為依賴項。當externalProp變化時，執行更新邏輯是安全且合理的。

相關文章