React 限制渲染次数以防止无限循环...重新渲染次数过多

关键词：

【中文标题】React 限制渲染次数以防止无限循环...重新渲染次数过多【英文标题】：React limits the number of renders to prevent an infinite loop...Too many re-renders 【发布时间】：2021-12-25 18:38:11 【问题描述】：

如何避免无限循环问题？

渲染以下组件时出现错误：

重新渲染过多。 React 限制了渲染的数量以防止无限循环。？

TeamContent.js 多次重新渲染，如何在加载时设置初始渲染？

Error given

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) => store.userInfo.live.games.all);
  const status = useSelector((store) => store.userInfo.playersLoadStatus);
  const UpcomingGamesstatus = useSelector(
    (store) => store.userInfo.upcomingGamesStatus
  );
  const previousGamesStatus = useSelector(
    (store) => store.userInfo.previousGamesStatus
  );
  const liveStatus = useSelector((store) => store.userInfo.live.games.status);

  liveGames.map((game) => 
    const verifyHomeTeam = +game.idHomeTeam === +props.teamID;
    const verifyAwayTeam = +game.idAwayTeam === +props.teamID;

    if (verifyAwayTeam || verifyHomeTeam) 
      containsLiveGame = true;
    
  );

  // -----> request team data
  useEffect(() => 
    dispatch(fetchTeamPlayers(props.teamID));
    dispatch(fetchUpcomingGames(props.teamID));
    dispatch(fetchPreviousGames(props.teamID));
    dispatch(fetchLiveGames());
  , [dispatch, props.teamID]);

  useEffect(() => 
    dispatch(fetchLiveGames());

    const interval = setInterval(() => 
      dispatch(fetchLiveGames());
    , 30000);

    return () => clearInterval(interval);
  , [dispatch]);

  return (
    <div className="teamDash">
      <div className="dashLeft">
        <div
          className="dashLeftHead"
          style=
            backgroundImage: `url($props.stadiumImg)`,
          
        >
          <div className="dashLeftHeadAbs"></div>
          <div className="dashLeftHeadIntro">
            <span>props.stadiumName</span>
            <h3>props.teamName</h3>
          </div>
        </div>
        liveStatus !== "error" && containsLiveGame && <LiveEvent />

        status !== "error" && (
          <div className="dashLeftPlayers">
            <TeamPlayers />
          </div>
        )

        <div className="dashLeftDesc">
          <p>props.teamDesc</p>
        </div>
      </div>
      <div className="dashRight">
        UpcomingGamesstatus === "error" ? (
          console.log("unable to load upcoming games")
        ) : (
          <div className="upcomingGames">
            <TeamNext id=props.teamID />
          </div>
        )
        previousGamesStatus === "error" ? (
          console.log("unable to load previous games")
        ) : (
          <div className="previousGames">
            <TeamPrevious />
          </div>
        )
      </div>
    </div>
  );


export default TeamContent;

infoActions.js

import  API_URL  from "../Api";
import  infoActions  from "./infoSlice";

export function fetchTeams() 
  return (dispatch) => 
    dispatch(infoActions.loadStatusHandler( status: "loading" ));
    async function getTeams() 
      try 
        const rq = await fetch(`$API_URLLookup_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) => 
    async function getPlayers() 
      dispatch(infoActions.statusPlayersHandler( status: "loading" ));
      try 
        const rq = await fetch(`$API_URLlookup_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) => 
    dispatch(infoActions.statusUGHandler( status: "loading" ));
    async function getGames() 
      try 
        const rq = await fetch(`$API_URLeventsnext.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) => 
    dispatch(infoActions.statusPGHandler( status: "loading" ));
    async function getGames() 
      try 
        const rq = await fetch(`$API_URLeventslast.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) => 
    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();
  ;

【问题讨论】：

尽量不要使用代码截图，在问题代码中贴出错误 【参考方案1】：

尝试从您传递给的数组中删除dispatch

useEffect(() => 
...
, [dispatch, props.teamID])

和

useEffect(() => 
...
, [dispatch])

dispatch 是一个函数，如果你将它包含到useEffect 监听器中，useEffect 将在每次渲染时触发

【讨论】：

加载时仍然出现同样的错误 通过注释掉代码中的所有 useEffect 来尝试逐步调试

收到此错误：错误：重新渲染过多。 React 限制渲染次数以防止无限循环

】收到此错误：错误：重新渲染过多。React限制渲染次数以防止无限循环【英文标题】：Recievedthiserror:Error:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop【发布时间】：2020-08-2011:56:58【问题描述】：我有一个步进表单，它... 查看详情

React Hook Form 重新渲染过多。 React 限制渲染次数以防止无限循环

】ReactHookForm重新渲染过多。React限制渲染次数以防止无限循环【英文标题】：ReactHookFormToomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop【发布时间】：2022-01-1915:40:04【问题描述】：我正在尝试观看一个名为派对的领域。选... 查看详情

我有一个错误：重新渲染太多。 React 限制渲染次数以防止无限循环

】我有一个错误：重新渲染太多。React限制渲染次数以防止无限循环【英文标题】：Ihaveanerror:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop【发布时间】：2021-06-0403:51:38【问题描述】：我是该网站的新手，这是我的第一... 查看详情

为啥错误：重新渲染太多。 React 限制了渲染的数量以防止无限循环。？

】为啥错误：重新渲染太多。React限制了渲染的数量以防止无限循环。？【英文标题】：whyError:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop.?为什么错误：重新渲染太多。React限制了渲染的数量以防止无限循环。？【发... 查看详情

太多的重新渲染。 React 限制了渲染的数量以防止无限循环。？

】太多的重新渲染。React限制了渲染的数量以防止无限循环。？【英文标题】：Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop.?【发布时间】：2021-01-2204:13:21【问题描述】：渲染以下组件时出现错误：重新渲染过多。React... 查看详情

错误太多重新渲染。 react 限制渲染次数以防止无限循环

】错误太多重新渲染。react限制渲染次数以防止无限循环【英文标题】：errortoomanyre-renders.reactlimitsthenumberofrenderstopreventaninfiniteloop【发布时间】：2021-02-0410:44:50【问题描述】：似乎调用映射到state的todoList会导致问题，但我不知道... 查看详情

错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。即使使用箭头函数

】错误：重新渲染过多。React限制了渲染的数量以防止无限循环。即使使用箭头函数【英文标题】：Error:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop.Evenwitharrowfunctionsused【发布时间】：2021-09-2904:49:53【问题描述】：所以... 查看详情

太多的重新渲染。 React 限制了渲染的数量以防止无限循环。 UI 和控制台错误

】太多的重新渲染。React限制了渲染的数量以防止无限循环。UI和控制台错误【英文标题】：Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop.UIandconoleerror【发布时间】：2021-07-1714:33:55【问题描述】：导入useState,useEffectfrom\'re... 查看详情

..Use state error: Too many re-renders React 限制渲染次数以防止无限循环

】..Usestateerror:Toomanyre-rendersReact限制渲染次数以防止无限循环【英文标题】：..Usestateerror:Toomanyre-rendersReactlimitsthenumberofrenderstopreventaninfiniteloop【发布时间】：2021-03-1819:42:51【问题描述】：好吧，我正在尝试从我的API获取产品并将... 查看详情

componentDidUpdate 错误是 React 限制嵌套更新的数量以防止无限循环如何解决此问题

】componentDidUpdate错误是React限制嵌套更新的数量以防止无限循环如何解决此问题【英文标题】：componentDidUpdateerrorisReactlimitsthenumberofnestedupdatestopreventinfiniteloopshowtofixthisissue【发布时间】：2020-09-0610:51:10【问题描述】：已超过最大... 查看详情

在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState。 React 限制嵌套更新的数量以防止无限循环

】在componentWillUpdate或componentDidUpdate中重复调用setState。React限制嵌套更新的数量以防止无限循环【英文标题】：repeatedlycallssetStateinsidecomponentWillUpdateorcomponentDidUpdate.Reactlimitsthenumberofnestedupdatestopreventinfiniteloops【发布时间】：2021- 查看详情

为啥我没有进入 React 无限重新渲染循环？

】为啥我没有进入React无限重新渲染循环？【英文标题】：WhydoInotgetintoaReactinfinitere-renderloop?为什么我没有进入React无限重新渲染循环？【发布时间】：2021-06-1700:51:24【问题描述】：我一直认为在useEffect调用中包含任何形式的setSta... 查看详情

React useEffect() 无限重新渲染以获取所有尽管有依赖关系

】ReactuseEffect()无限重新渲染以获取所有尽管有依赖关系【英文标题】：ReactuseEffect()infinitere-renderforgettingalldespitedependencies【发布时间】：2022-01-1211:01:43【问题描述】：我对React比较陌生，但我一直在使用useEffect在页面加载时从数... 查看详情

避免在反应组件中无限重新渲染

】避免在反应组件中无限重新渲染【英文标题】：Avoidinginfinitere-renderinginreactcomponent【发布时间】：2022-01-2107:04:46【问题描述】：我有一个名为threads的Supabase数据库，有5个条目，我正在尝试为数据库中的每一列创建一个新的React... 查看详情

React 组件中的错误导致应用程序重新渲染，从而导致无限循环。为啥？

】React组件中的错误导致应用程序重新渲染，从而导致无限循环。为啥？【英文标题】：ErrorinReactcomponentcausingapptore-render,whichiscausinginfiniteloop.Why?React组件中的错误导致应用程序重新渲染，从而导致无限循环。为什么？【发布时间... 查看详情

限制导航以防止浏览器在 React App 中挂起

】限制导航以防止浏览器在ReactApp中挂起【英文标题】：ThrottlingnavigationtopreventthebrowserfromhanginginReactApp【发布时间】：2019-11-0204:01:51【问题描述】：我正在使用React进行登录/注册，并且正在使用firebaseauth进行身份验证。当用户登... 查看详情

React：在 useEffect 中调用上下文函数时防止无限循环

...01-1520:52:02【问题描述】：在我的react应用程序中，我正在渲染<Item>组件的不同实例，我希望它们在上下文中注册/取消注册，具体取决于它们当前是否已安装。我正在使用 查看详情

如何防止 react 重新渲染整个组件？

】如何防止react重新渲染整个组件？【英文标题】：Howtopreventreactfromre-renderingthewholecomponent?【发布时间】：2017-06-0509:44:26【问题描述】：我从here改编了以下组件定义，如下所示。但是，与示例不同，每次我在组件上移动鼠标时都... 查看详情