async onSubmit 以等待状态更改

Question

我有一个在提交上运行函数的表单。该函数(动作缩减器(调用一个异步函数，该函数使用化简器存储数据，然后更改某些状态(不返回任何内容(。我需要查看结果，如果这个函数(检查状态(选择下一个操作。我正在做如下：

const onSubmit = async (e) => {
e.preventDefault();

await addPlanner(planner); // Reducer Action that changes state field called error initially set to null

if (error) {
setAlert(error, 'error');
} else {
setAlert('Planner Added', 'success');
}
clearForm();
};

当前行为：

• 当addPlanner成功运行时，我得到计划器添加警报(因为错误不会改变，因此保持初始状态为空(。当它失败时，计划器添加警报再次出现，然后状态被更改(但如果函数没有等待它(
• 这有可能处理吗？

Answer 1

您可以使用 Effect hook，它在错误状态更改时调用。同时从当前添加的位置删除代码

React.useEffect(
() => {
if (error) {
setAlert(error, 'error');
}  else {
setAlert('Planner Added', 'success');
}
},
[error]
);