重新渲染太多.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]);

你应该试试这个...它仅在diffrenceInCount发生变化时运行