时间戳

首页 > 解决方案 > 仅当状态与当前值不同时如何在反应挂钩中设置状态

reactjs - 仅当状态与当前值不同时如何在反应挂钩中设置状态

问题描述

我有以下代码 

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 秒发生一次

标签： reactjsrequestreact-hooks

解决方案

那是因为你得到的状态已经过时了。您可以做的是使用创建一个 ref useRef，然后在另一个内部使用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);
  }, []);
}

希望这可以帮助 ：）

推荐阅读