javascript - 等待 react 状态在功能组件中更新

Question

如何确保 handleOpen 仅在所有状态(nameError、emailError、messageError)之后执行) 更新了吗？我的问题是，由于状态不会立即更新，有时 handleOpen 会在不应该执行的时候执行。

const handleSend = (e) => {
e.preventDefault();
if (name === "") {
  setNameError(true);
}
if (email === "") {
  setEmailError(true);
  setEmailErrorMessage("Please type your email!");
}
if (!email.includes("@")) {
  setEmailError(true);
  setEmailErrorMessage("Invalid email address");
}
if (message === "") {
  setMessageError(true);
}
if (!nameError && !emailError && !messageError) {
  handleOpen();
}

};

Answer 1

我看到您正在为 JS 事件循环而苦苦挣扎。 React 状态将在事件循环完成后更新。因此，您不能指望它们会在您的处理函数中立即更新。

然而，还有一些其他解决方案，例如使用 setTimeout(..., 0) 来欺骗事件循环，在这种情况下这对您没有帮助。

在这里您需要重构处理程序方法来处理函数范围内的错误状态，并将最终结果设置为错误状态。

const handleSend = (e) => {
  e.preventDefault();
  
  const errors = {
    name: '',
    email: '',
    message: '',
  };
  
  if (name === "") {
    errors.name = "Please enter your name";
  }

  if (email === "") {
    errors.email = "Please type your email!";
  }

  if (!email.includes("@")) {
    errors.email = "Invalid email address";
  }

  if (message === "") {
    errors.email = "Please enter a message";
  }

  setNameError(!!errors.name);
  setNameErrorMessage(errors.name);
  setEmailError(!!errors.email);
  setEmailErrorMessage(errors.email);
  setMessageError(!!errors.message);
  setMessageErrorMessage(errors.message);

  if (Object.values(errors).filter(Boolean).length === 0) {
     handleOpen();
  }
}

我强烈建议重构您的应用程序中的错误处理过程。您的解决方案和我在这里写的解决方案根本没有效率。

祝你好运;)