在useEffect中对Each进行处理后调用setstate

Question

我正在尝试处理useEffect上的一些api数据，在处理数据时，我需要将其设置为各种状态，在处理这些数据时，由于某些原因，useEffect被无限触发。尽管从类组件中我知道setState是一个异步操作，它不等待forEach的完成。我们对功能组件有什么变通办法吗。

useEffect(() => {
const apiResponse = fetchAppName();  
apiResponse.then(
(response) => {
// if (response.statusCode === '200' && response.status.statusType === 'SUCCESS' && response.data) {
const dataFields = {};
const appNameValues = [];
dummyData.data.forEach((ele) => {
const workFlowIds = [];
ele.workflowConfigs.forEach((wc) => {
workFlowIds.push(wc.workflowId);
})
dataFields[ele.name] = workFlowIds;
});
Object.keys(dataFields).forEach((k) => {
appNameValues.push(k);
});
setAppData(dataFields);
setDropDownOptions({
...dropDownOptions,
appName: appNameValues,
});
// }
}).catch((e)=>{
console.log('Failed to fetchAppNames due to: ', e);
});
},[setDropDownOptions, dropDownOptions]);

Answer 1

问题

不要使用由效果更新的依赖项。换句话说，dropDownOptions是一个依赖项，效果会更新它，从而创建渲染循环。

解决方案

状态更新器函数是稳定的，因此没有必要，并使用函数状态更新来删除其他dropDownOptions依赖项。

使用状态

注意

React保证setState函数标识是稳定的，不会重新渲染时的更改。这就是为什么从useEffect中省略是安全的或使用回调依赖关系列表。

useEffect(() => {
const apiResponse = fetchAppName();  
apiResponse.then(
(response) => {
// if (response.statusCode === '200' && response.status.statusType === 'SUCCESS' && response.data) {
const dataFields = {};
const appNameValues = [];
dummyData.data.forEach((ele) => {
const workFlowIds = [];
ele.workflowConfigs.forEach((wc) => {
workFlowIds.push(wc.workflowId);
})
dataFields[ele.name] = workFlowIds;
});
Object.keys(dataFields).forEach((k) => {
appNameValues.push(k);
});
setAppData(dataFields);
setDropDownOptions(dropDownOptions => ({
...dropDownOptions,
appName: appNameValues,
}));
// }
}).catch((e)=>{
console.log('Failed to fetchAppNames due to: ', e);
});
},[]); // will run on mount, add other dependency triggers if needed.