Блог

Как бы я избежал проблемы с бесконечным циклом?

Я получаю ошибку при отображении следующего компонента:

Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.?

TeamContent.js повторная визуализация несколько раз, как я могу установить начальную визуализацию при загрузке?

Данная ошибка

TeamContent.js

 import { useEffect, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; import {  fetchTeamPlayers,  fetchUpcomingGames,  fetchPreviousGames,  fetchLiveGames, } from "../../../data/UserInfo/infoActions"; import TeamPlayers from "./TeamPlayers"; import TeamNext from "./TeamNext"; import TeamPrevious from "./TeamPrevious"; import LiveEvent from "./Live.js/LiveEvent";  function TeamContent(props) {  console.log("test");  let containsLiveGame = false;  const dispatch = useDispatch();  const liveGames = useSelector((store) =gt; store.userInfo.live.games.all);  const status = useSelector((store) =gt; store.userInfo.playersLoadStatus);  const UpcomingGamesstatus = useSelector(  (store) =gt; store.userInfo.upcomingGamesStatus  );  const previousGamesStatus = useSelector(  (store) =gt; store.userInfo.previousGamesStatus  );  const liveStatus = useSelector((store) =gt; store.userInfo.live.games.status);   liveGames.map((game) =gt; {  const verifyHomeTeam =  game.idHomeTeam ===  props.teamID;  const verifyAwayTeam =  game.idAwayTeam ===  props.teamID;   if (verifyAwayTeam || verifyHomeTeam) {  containsLiveGame = true;  }  });   // -----gt; request team data  useEffect(() =gt; {  dispatch(fetchTeamPlayers(props.teamID));  dispatch(fetchUpcomingGames(props.teamID));  dispatch(fetchPreviousGames(props.teamID));  dispatch(fetchLiveGames());  }, [dispatch, props.teamID]);   useEffect(() =gt; {  dispatch(fetchLiveGames());   const interval = setInterval(() =gt; {  dispatch(fetchLiveGames());  }, 30000);   return () =gt; clearInterval(interval);  }, [dispatch]);   return (  lt;div className="teamDash"gt;  lt;div className="dashLeft"gt;  lt;div  className="dashLeftHead"  style={{  backgroundImage: `url(${props.stadiumImg})`,  }}  gt;  lt;div className="dashLeftHeadAbs"gt;lt;/divgt;  lt;div className="dashLeftHeadIntro"gt;  lt;spangt;{props.stadiumName}lt;/spangt;  lt;h3gt;{props.teamName}lt;/h3gt;  lt;/divgt;  lt;/divgt;  {liveStatus !== "error" amp;amp; containsLiveGame amp;amp; lt;LiveEvent /gt;}   {status !== "error" amp;amp; (  lt;div className="dashLeftPlayers"gt;  lt;TeamPlayers /gt;  lt;/divgt;  )}   lt;div className="dashLeftDesc"gt;  lt;pgt;{props.teamDesc}lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;div className="dashRight"gt;  {UpcomingGamesstatus === "error" ? (  console.log("unable to load upcoming games")  ) : (  lt;div className="upcomingGames"gt;  lt;TeamNext id={props.teamID} /gt;  lt;/divgt;  )}  {previousGamesStatus === "error" ? (  console.log("unable to load previous games")  ) : (  lt;div className="previousGames"gt;  lt;TeamPrevious /gt;  lt;/divgt;  )}  lt;/divgt;  lt;/divgt;  ); }  export default TeamContent;  

infoActions.js

 import { API_URL } from "../Api"; import { infoActions } from "./infoSlice";  export function fetchTeams() {  return (dispatch) =gt; {  dispatch(infoActions.loadStatusHandler({ status: "loading" }));  async function getTeams() {  try {  const rq = await fetch(`${API_URL}Lookup_all_teams.php?id=4387`);  const res = await rq.json();  const data = res.teams;  dispatch(infoActions.loadTeamsHandler({ teams: data }));  dispatch(infoActions.loadStatusHandler({ status: "done" }));  } catch (error) {  dispatch(infoActions.loadStatusHandler({ status: "error" }));  }  }  getTeams();  }; }  export function fetchTeamPlayers(id) {  return (dispatch) =gt; {  async function getPlayers() {  dispatch(infoActions.statusPlayersHandler({ status: "loading" }));  try {  const rq = await fetch(`${API_URL}lookup_all_players.php?id=${id}`);  const res = await rq.json();  const data = res.player;  dispatch(infoActions.loadPlayersHandler({ players: data }));  dispatch(infoActions.statusPlayersHandler({ status: "done" }));  } catch (error) {  dispatch(infoActions.statusPlayersHandler({ status: "error" }));  }  }  getPlayers();  }; }  export function fetchUpcomingGames(id) {  return (dispatch) =gt; {  dispatch(infoActions.statusUGHandler({ status: "loading" }));  async function getGames() {  try {  const rq = await fetch(`${API_URL}eventsnext.php?id=${id}`);  const res = await rq.json();  const data = res.events;  dispatch(infoActions.upcomingGamesHandler({ games: data }));  dispatch(infoActions.statusUGHandler({ status: "done" }));  } catch (error) {  dispatch(infoActions.statusUGHandler({ status: "error" }));  }  }  getGames();  }; }  export function fetchPreviousGames(id) {  return (dispatch) =gt; {  dispatch(infoActions.statusPGHandler({ status: "loading" }));  async function getGames() {  try {  const rq = await fetch(`${API_URL}eventslast.php?id=${id}`);  const res = await rq.json();  const data = res.results;  dispatch(infoActions.previousGamesHandler({ games: data }));  dispatch(infoActions.statusPGHandler({ status: "done" }));  } catch (error) {  dispatch(infoActions.statusPGHandler({ status: "error" }));  }  }  getGames();  }; }  export function fetchLiveGames() {  return (dispatch) =gt; {  dispatch(infoActions.statusLiveGames({ status: "loading" }));  async function getGames() {  try {  const rq = await fetch(  `https://www.thesportsdb.com/api/v2/json/40130162/livescore.php?l=4387`  );  const res = await rq.json();  const data = res.events;  dispatch(infoActions.statusLiveGames({ status: "done" }));  dispatch(infoActions.loadLiveGames({ liveGames: data }));  } catch (error) {  dispatch(infoActions.statusLiveGames({ status: "error" }));  }  }  getGames();  }; }  

Попробуйте удалить dispatch из массива, в который вы перешли

 useEffect(() =gt; { ... }, [dispatch, props.teamID])  

и

 useEffect(() =gt; { ... }, [dispatch])  

dispatch это функция, и если вы включите ее в useEffect прослушиватель, useEffect она будет срабатывать при каждом рендеринге