javascript - 功能组件不断重新渲染

Question

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

我能找到的唯一解决方案是在 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 />在渲染中。

Answer 1

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

    setgenreList(a);

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

当你写作的时候

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

那么每次你调用它的setter setgenreList时它都会被调用

你可以写

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