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

Question

当我试图设置状态，然后得到一个错误。错误:太多的重新渲染。React限制渲染的数量以防止无限循环。

const Money= (props) => {
     // some states and functions
      .
      .
      /
     const [loss, setLoss] = useState('');
     const [gain, setGain] = useState('');

     const diffrenceInCount = (todayCount as any) - (yestarDayCount as any);
        // (todayCount(6) and yestarDayCount(24) are my some states which holds the respective values)
        //diffrenceInCount = -18

        if (diffrenceInCount < 0) {
          const moneyLoss = diffrenceInCount.toString();
          setLoss(moneyLoss );
        }
        if (diffrenceInCount > 0) {
          const moneyGain = diffrenceInCount.toString();
          setGain(moneyGain);
        }

       useEffect(() => {
         userMoney();
         allUserMoney();
       }, [])

 return (
      <IonContent>
       {* some code *}
      </IonContent>
      );
}
export default Money;

我已经用useReducer尝试过了，我正在寻找设置状态的解决方案。




Answer 1

useEffect(() => {
    if (diffrenceInCount < 0) {
      const moneyLoss = diffrenceInCount.toString();
      setLoss(moneyLoss );
    }
    if (diffrenceInCount > 0) {
      const moneyGain = diffrenceInCount.toString();
      setGain(moneyGain);
    }
}, [diffrenceInCount]);

你应该试试这个...它仅在差异发生变化时运行计数