reactjs - 仅当状态与当前值不同时如何在 react Hook 中设置状态

Question

我有以下代码

setInterval(() => {
             fetch(`/clusters?type=${type}`)
                .then((response) => response.json()
                  .then((responseBody) => {
                    if(clusters !== responseBody.members)
                        setClusters(responseBody.members);
                  }))
                .catch();
    }, 5000);

因为 clusters 在检查时异步设置 if(clusters !== responseBody.members) clusters 总是空的，所以这是正确的方法去做吧？我正在尝试这样做是为了减少渲染次数，因为该请求每 5 秒发生一次

Answer 1

那是因为你得到的状态已经过时了。您可以做的是使用 useRef 创建一个 ref，然后在另一个 useEffect 中用您的状态的当前值更新 ref。然后在获取数据后使用 ref 将其与状态进行比较，如下所示:

function App() {
  const [clusters, setClusters] = useState([]);
  const clustersRef = useRef(clusters);

  useEffect(() => {
    clustersRef.current = clusters;
  });

  useEffect(() => {
    setInterval(() => {
      fetch(`/clusters?type=${type}`)
      .then((response) => response.json()
      .then((responseBody) => {
          if(clustersRef.current !== responseBody.members)
            setClusters(responseBody.members);
      }))
      .catch();
    }, 5000);
  }, []);
}

希望这有帮助:)