Javascript 更新状态（useState）并导航（history.push）到另一页。。。。对吗？

我从零开始学习ReactJS和hooks，我不确定下面的代码是否遵循了良好的实践

  const [showSpinner, setShowSpinner] = useState(false);
  ....
  const onSaveHandler = async () => {
    setShowSpinner(true);
    try {
      for (const skillState of skillStates) {
        const { id, state, originalState, isNew } = skillState;
        const userSkill = userSkills.find((userSkill) => userSkill.id === id);
        if (isNew) {
          if (!!state) {
            await DataStore.save(userSkill);
          }
        } else {
          if (state !== originalState) {
            if (!!state) {
              await DataStore.save(userSkill);
            } else {
              await DataStore.delete(userSkill);
            }
          }
        }
      }
    } catch (error) {
      console.log(error);
    }
    await setCurrentUser();
    setShowSpinner(false);

    history.push(MY_PROFILE_URL);
  };

基本上，此函数与函数组件内的事件处理程序相关联。当用户单击“保存”按钮时，将调用此函数，显示微调器，将信息保存在数据存储中，当完成将信息保存在数据存储中时，它将更新微调器状态并导航到另一个页面

我关心的是更新组件状态，因此该组件将重新呈现，并且当当前组件正在运行重新呈现周期时，我将导航到另一个页面

---

面对这种情况，最好的方法是什么？

我认为在更新状态后立即导航不会有任何问题。 如果您使用的是类组件和内部render（）函数，则调用setState，React将在开发人员工具的控制台中发出警告消息。

---

顺便说一句，我认为您应该使用Promise.all来处理承诺列表，而不是使用单独的等待，这将使您的代码更具可读性。

我认为在更新状态后立即导航不会出现任何问题。 如果您使用的是类组件和内部render（）函数，则调用setState，React将在开发人员工具的控制台中发出警告消息。 顺便说一句，我认为您应该使用Promise.all来处理承诺列表，而不是使用单独的等待，这将使您的代码更具可读性