javascript - 太多的重新渲染。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，我正在寻找设置状态的解决方案。

标签： javascriptreactjsionic-framework

Answer 1

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

你应该试试这个......它只在有变化时运行diffrenceInCount