Question

我有一个运行onSubmit函数的表单。该函数（动作缩减器）调用异步函数，该函数使用缩减器存储数据，然后更改某些状态（不返回任何内容）。我需要查看此功能（检查状态）的结果以选择下一个动作。我正在做以下事情：

    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成功运行时，我会收到“计划器已添加警报”（因为错误不会更改，因此保持在初始状态null）。当它失败时，再次显示“添加计划者”警报，然后更改状态（但如果函数不等待它）
可以处理吗？

Answer 1

您可以使用效果挂钩，该挂钩在错误状态更改时调用。另外，从您当前添加的地方删除代码

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

异步onSubmit等待状态更改

1 个答案: