react hook useffect如何僅在json數據更改時觸發？

Question

我正在研究 React 鈎子，當我設置對 useEffect 的依賴時它會一直觸發，但它應該只在 Json API 發生一些變化時觸發，這是我到目前為止的代碼。如何讓它只觸發它新的更改將在 API 中。

謝謝

const [data, setData] = useState([]);
  useEffect(() => {
    const getdata = () => {
      fetch(config.auth.notification_list, config.head)
        .then((response) => response.json())
        .then((data) => {
          setData(data);
        });
    };

    getdata();
  }, [data]);

Answer 1

由於您想“僅在...更改...時觸發” ，因此僅在發生這些更改時才需要設置data 。

在這里您需要根據您的需要實現dataHasChanged( data ) （您沒有指定“API 更改”的確切含義）。

const [ data, setData ] = useState([]);
useEffect(() => {
  fetch( /*...*/ )
    .then(( data ) => {

      if( dataHasChanged( data ) ){  // <----- only set data if necessary
        setData( data );
      }

    });
}, [ data ]);

或者（如果適合您的用例），您可能只在知道新數據可能已更改時才獲取新數據：

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

  if( !newDataNeedsToBeFetched( data ) ){ // <----- skip if no fetch necessary
    return;
  }

  fetch( /* ... */ )
    .then(( data ) => {
      setData( data );
    });
}, [ data ]);

實現hasChanged()

如何確定 javascript 中的數據是否發生變化是一個單獨的問題。 也許你甚至沒有問題，否則請參考其他答案，例如design-pattern-to-check-if-a-javascript-object-has-changed 。

您可能還想知道如何使用useRef()來存儲以前的值： how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect