时间戳

首页 > 解决方案 > 函数组件不断地重新渲染

javascript - 函数组件不断地重新渲染

问题描述

我的反应函数组件不断地重新渲染自己，直到浏览器崩溃。

我能找到的唯一解决方案是在 useEffect() 末尾使用我的常量输入 []。

function getNestedObject(nestedObj, pathArr) {
  return pathArr.reduce(
    (obj, key) => (obj && obj[key] !== "undefined" ? obj[key] : undefined),
    nestedObj
  );
}

function Genres() {
  const [genreList, setgenreList] = useState(0);

  useEffect(() => {
    let results = "";
    axios({
      url: "https://api.themoviedb.org/3/genre/movie/list?",
      method: "GET",
      responseType: "json",
      params: {
        api_key: "00000000000",
        language: "en-US"
      }
    }).then(result => (results = result.data.genres));

    let a = [];
    for (let i = 0; i < 10; i++) {
      let name = getNestedObject(results, [i, "name"]);
      a.push(name);
    }
    setgenreList(a);
    console.log(genreList);
  }, [genreList]);
  return <div>test</div>;
}

我也试过没有 useEffect ，它给出了相同的循环结果。

我已经<Genres />在渲染中了。

标签： javascriptreactjsreact-hooks

解决方案

它的发生是因为你在打电话

    setgenreList(a);

在 useffect ，genreList 改变它的状态， UseEffect 再次运行

当你写作时

  useEffect(() => {}, [genreList])

然后每次调用它的设置器setgenreList时都会调用它

你可以写

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

推荐阅读