Javascript useffect（）由于某种原因无限运行

因此，我目前正在尝试学习react，作为实践，我只是尝试使用hacker新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);
  });

与：

---

但这似乎不起作用

如果不将依赖项数组传递给useEffect，则useEffect将在每个渲染上运行

通过将空数组[]作为依赖项传递，useEffect在装入组件时运行一次。 例：

useEffect=>{ …//您的代码 }, []

---

如果未将依赖项数组传递给useEffect，则useEffect将在每个渲染上运行

通过将空数组[]作为依赖项传递，useEffect在装入组件时运行一次。 例：

useEffect=>{ …//您的代码 }, []

---

您应该向useEffect添加依赖项，因为如果不添加任何依赖项，此方法将无限运行

只需在方法[]的末尾实现

此外，请注意setMainData，因为您在axis请求之外调用它

最终代码可能是：

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"]);
              // here you have output array with the push action that you did in previous line
              setmaindata(output);
            });
        }
      });
    
  }, [dependency]);

---

使用您希望在该值更改时使用的变量更改相关性此useEffect将被称为

您应该向useEffect添加相关性，因为如果不添加任何相关性，此方法将无限运行

只需在方法[]的末尾实现

此外，请注意setMainData，因为您在axis请求之外调用它

最终代码可能是：

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"]);
              // here you have output array with the push action that you did in previous line
              setmaindata(output);
            });
        }
      });
    
  }, [dependency]);

---

更改此值更改时要使用的变量的相关性此useEffect将被调用

您链接的答案是正确的，只需确保将其放置在正确的位置，即传递给useEffect的函数之后，作为useEffect的第二个参数：Change}；到}，[]；链接到的答案是正确的，只需确保将其放置在正确的位置，即传递给useEffect的函数之后，作为useEffect的第二个参数：change}；到}，[]；

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"]);
              // here you have output array with the push action that you did in previous line
              setmaindata(output);
            });
        }
      });
    
  }, [dependency]);