如何正确地结合这两种使用效果

Question

这是我的问题：

我想运行两个useEffects来初始化我的表单值。

我需要帮助找出正确的方法来做到这一点。

以下是效果：

useEffect(() => {
if (fetchedIssue !== null) {
setIssueUpdateArray(() => {
return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
});
setActionArray(() => {
return fetchedIssue.actions.map(action => action.actionGuid);
});
}
}, [fetchedIssue]);
useEffect(() => {
if (fetchedIssue !== null) {
populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
} else {
populateFormObj(setValue, defaultFormValues);
}
}, [fetchedIssue, setValue]);

但是当我渲染表单时，它是空的，我认为这是因为setIssueArray和setActionArray发生在我运行populateFormObj之后.

据我了解，这就是 React 中二传手的工作方式？

所以我的第一个方法是像这样组合它们：

useEffect(() => {
const initializeForm = () => {
if (fetchedIssue !== null) {
setIssueUpdateArray(() => {
return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
});
setActionArray(() => {
return fetchedIssue.actions.map(action => action.actionGuid);
});
populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
}
else populateFormObj(setValue, defaultFormValues);
};
initializeForm()
}, [fetchedIssue, setValue]);

这仍然不起作用，直到我像这样异步initializeForm函数：

useEffect(() => {
const initializeForm = async () => {
if (fetchedIssue !== null) {
await setIssueUpdateArray(() => {
return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
});
await  setActionArray(() => {
return fetchedIssue.actions.map(action => action.actionGuid);
});
populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
}
else populateFormObj(setValue, defaultFormValues);
};
initializeForm()
}, [fetchedIssue, setValue]);

它奏效了。

到目前为止，我还没有看到这样做，所以我想知道这是否是不好的做法，以及是否有更好的方法来达到相同的结果。

谢谢

Answer 1

好吧，所以我意识到我看错了。

这是我想到的：

useEffect(() => {
if (fetchedIssue !== null) {
const { mappedIssueUpdates } = mapIssueToFormValues(fetchedIssue);
populateFormObj(setValue, mappedIssueUpdates);
}
}, [fetchedIssue, issueUpdateArray, setValue]);
useEffect(() => {
if (fetchedIssue !== null) {
const { mappedActions } = mapIssueToFormValues(fetchedIssue);
populateFormObj(setValue, mappedActions);
}
}, [actionsArray, fetchedIssue, setValue]);
useEffect(() => {
if (fetchedIssue !== null) {
const { mappedValues } = mapIssueToFormValues(fetchedIssue);
populateFormObj(setValue, mappedValues);
} else {
populateFormObj(setValue, defaultFormValues);
}
}, [fetchedIssue, setValue]);

每个useEffect都会更新其自己的表单部分。 所以每当我更新问题更新数组和动作数组时，我都会填充表单。