时间戳

首页 > 解决方案 > useEffect() 由于某种原因无限运行

javascript - useEffect() 由于某种原因无限运行

问题描述

所以我目前正在尝试学习反应，作为实践，我只是尝试使用黑客新 API 构建一个黑客新闻网站。但是，我遇到了一个问题。由于某种原因，它目前正在无限循环。我调试了一下，发现跟 useEffect() 钩子有关系。我在这篇文章中尝试了解决方案，但它没有成功（我想我可能做错了）。

我的代码：

const [maindata, setmaindata] = useState("");

  
  useEffect(() => {
    axios
      .get("https://hacker-news.firebaseio.com/v0/user/jl.json?print=pretty")
      .then((repo) => {
        const output = [];

        // repo.data["submitted"].length
        for (let x = 0; x < 30; x++) {
          axios
            .get(
              "https://hacker-news.firebaseio.com/v0/item/" +
                repo.data["submitted"][x] +
                ".json?print=pretty"
            )
            .then((titledata) => {
              //console.log(titledata.data["text"]);
              output.push(titledata.data["text"]);
            });
        }
      });
    setmaindata(output);
  });

我也尝试更换：

        }
      });
    setmaindata(output);
  });

和：

        }
      });
  }, [output});

但这似乎不起作用

标签： javascriptreactjs

解决方案

如果你不将依赖数组传递给useEffect,useEffect在每个渲染上运行。

通过将空数组（[]）作为依赖项传递，useEffect在安装组件时运行一次。前任：

useEffect(() => {
... // your code
}, [])

推荐阅读