處理記憶一個組件，該組件以 React 中的間隔從 API 調用中獲取數據？

Question

由於 API 的限制，我有一個組件需要每隔一段時間從 API 調用中獲取數據。 如果 API 返回不同的值，我只想更新該組件的狀態，而不是 API 調用返回與上次相同的數據。

這個組件是我的 React 應用程序的根，所以我當前的解決方案是創建一個新的根組件來執行獲取並將 API 響應作為 prop 傳遞，並且接收該 prop 的組件將被記憶，因此它不會更新如果響應與之前的響應道具相同，但這似乎不需要為此添加新組件。

我還嘗試比較當前狀態和來自 API 的響應，但由於我使用的是鈎子，因此相等性檢查將始終為 false，因為重新渲染時始終使用初始狀態：

  const [data, setData] = useState({});

  const getData = async () => {
    const testData = await getTestData();
    if (!_.isEqual(data, testData)) { // will always be false
      setData(testData); // will always update
    }
  };

  useEffect(() => {
      const interval = setInterval(() => {
      getData();
    }, 5000);
    return () => clearInterval(interval);
  }, []);

Answer 1

我還嘗試比較當前狀態和來自 API 的響應，但由於我使用的是鈎子，因此相等性檢查將始終為 false，因為重新渲染時始終使用初始狀態：

如果使用 set state 的回調版本，則可以獲得最新的值。 如果你返回之前的狀態，react 將跳過重新渲染組件：

const getData = async () => {
  const testData = await getTestData();
  setData(prev => {
    if (!_.isEqual(prev, testData)) {
      return testData;
    } else {
      return prev;
    }
  });
};