错误:重新渲染过多。 React限制了渲染次数以防止无限循环。 useEffect无限运行

时间:2020-11-12 06:03:10

标签: javascript reactjs react-hooks use-state

我一直在做一个反应项目,在过去的两天内无法解决此问题。我的提取工作正常,并向我返回了测验列表。但是由于某种原因,我无法在渲染中显示它们。在chrome devTools中,我检查了状态并进行了更新。我尝试将response2.quizzes,newGames,games.concat(newGames)和所有其他可能性传递给setGames。它不会工作。下面是代码。任何帮助将不胜感激,因为我是新来的反应者。谢谢

  const [games, setGames] = React.useState([]);
  const token = localStorage.getItem('token');
  const getListofGames = async () => {
    getMethodOptions.headers.Authorization = token
    const response = await fetch(`${BASE_URL}/admin/quiz`, getMethodOptions);
    if (response.status === 200) {
      const response2 = await response.json();
      const newGames = [];
      newGames.push(response2.quizzes);
      console.log(newGames);
      setGames([...newGames]);
    }
  };
  React.useEffect(() => {
    getListofGames();
    console.log(games);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <>
      <NavBar />
      <CreateNewGameBar />
      <div>
        Create Games Appear here
      </div>
      {games.length > 0 && games.map(({id, name, thumbnail}) => (
        <QuizCard 
          quizId={id}
          quizName={name}
          thumbnail={thumbnail}
        />
      ))}
    </>
  );
}

export default Dashboard;```

0 个答案:

没有答案