[英]setState using its callback inside useEffect causing infinite looping
我知道这是一个关于useEffect
和useState
无限循环的过度提问。 我已经阅读了几乎所有关于它的问题,并在互联网上进行了搜索,以便在发布之前尝试修复它。 最近的文章,我读了这一个。
之前,我阅读文章我useState
内部功能useEffect
是没有useState
的回调,所以这是我认为这是造成问题的原因。 但是从这里移动它之后:
setNotifications({
...notifications,
[type]: {
...notifications[type],
active: portfolioSettings[type],
payload: {
...notifications[type].payload,
[pKey]: portfolioSettings[pKey],
},
},
});
对此:
setNotifications((currState) => ({
...currState,
[type]: {
...currState[type],
active: portfolioSettings[type],
payload: {
...currState[type].payload,
[pKey]: portfolioSettings[pKey],
},
},
}));
不幸的是,无限循环仍然存在。 这是我在这个组件中使用的所有useEffect
函数(最后一个是导致无限循环的函数)。
// Set default selected portfolio to the active portfolio
useEffect(() => {
let mounted = true;
const setPortfolioData = () => {
if (activePortfolio) {
const portfolioId = activePortfolio.id;
const portfolioName = activePortfolio.name;
setSelectedPortfolio({
portfolioId,
portfolioName,
});
}
};
if (mounted) setPortfolioData();
return () => {
mounted = false;
};
}, [activePortfolio]);
// Set all the categories if no category is set
useEffect(() => {
let mounted = true;
if (mounted && allCvmCategories) {
const allCvmCategoriesNames = allCvmCategories.map((c) => c);
setNotifications((currState) => ({
...currState,
isCvmNotificationEnabled: {
...currState.isCvmNotificationEnabled,
payload: {
...currState.isCvmNotificationEnabled.payload,
cvmCategories: allCvmCategoriesNames,
},
},
}));
setIsCvmCategoriesReady(true);
}
return () => {
mounted = false;
};
}, [allCvmCategories]);
// THE ONE WHICH IS CAUSING INFINITE LOOPING
// THE notificationsTypes AND notificationsInitialState
// ARE DECLARED IN THE ROOT OF THE JSX FILE
// OUT OF THE FUNCTIONAL COMPONENT
useEffect(() => {
let mounted = true;
if (
mounted &&
isCvmCategoriesReady &&
allPortfolios &&
selectedPortfolio.portfolioId
) {
const { portfolioId } = selectedPortfolio;
const portfolioSettings = allPortfolios[portfolioId].settings;
if (portfolioSettings) {
notificationsTypes.forEach((type) => {
if (Object.prototype.hasOwnProperty.call(portfolioSettings, type)) {
const { payloadKeys } = notificationsInitialState[type];
if (payloadKeys.length > 0) {
payloadKeys.forEach((pKey) => {
if (
Object.prototype.hasOwnProperty.call(portfolioSettings, pKey)
) {
setNotifications((currState) => ({
...currState,
[type]: {
...currState[type],
active: portfolioSettings[type],
payload: {
...currState[type].payload,
[pKey]: portfolioSettings[pKey],
},
},
}));
}
});
} else {
setNotifications((currState) => ({
...currState,
[type]: {
...currState[type],
active: portfolioSettings[type],
},
}));
}
}
});
}
}
return () => {
mounted = false;
};
}, [allPortfolios, isCvmCategoriesReady, selectedPortfolio]);
感谢您的回复。 我发现了问题,它与我使用(SWR)进行提取的钩子有关。 使allPortfolios
一直在变化。 我已将它固定在一个新的自定义挂钩中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.