React 无法在 onClick 函数中设置变量

Question

我正在尝试在 onClick 事件中设置一个变量。我正在将错误消息设置到变量中。

const handleEdit = (e) => {
        e.preventDefault();

         if (edit_user.email == "") {
             setEditUserError({ email: "Please enter an email!" })
        }

        if (edit_user.company == "") {
           setEditUserError({ ...edit_user_error, company: "Please enter company!" })
       }

我正在以 <span className="text-danger">{edit_user_error.company}</span>

的形式显示错误

问题是当所有字段都为空并且当我单击按钮时只显示最后一条消息。当我将一个字段设为空，然后单击提交按钮时，它工作正常。我试过 console.log(edit_user_error) 但它显示为空。我究竟做错了什么？请帮忙

Answer 1

这是因为批量状态更新。 React 将尝试通过最小化状态更新来减少渲染。您可以使用功能状态更新来解决此问题：

if (edit_user.email == "") {
  setEditUserError({ email: "Please enter an email!" });
}

if (edit_user.company == "") {
  // this callback gets executed only when previous state updates are done
  setEditUserError((prev) => ({ ...prev, company: "Please enter company!" }));
}

要在字段有效时清除错误：

const getErrors = () => {
  return {
    ...(!edit_user.email ? { email: "Please enter an email!" } : {}),
    ...(!edit_user.company ? { company: "Please enter company!" } : {}),
  };
};

const handleEdit = (e) => {
  e.preventDefault();

  setEditUserError(getErrors());
};

Answer 2

React 状态更新是异步的，这意味着它们不会立即运行。因此，当运行将多个 setState 设置为相同状态时，您不能期望第一个 setState 调用的状态在第二个 setState 调用发生之前更新。

简而言之，React 会忽略您之前的 setState 调用，因为它们一个接一个地发生。

解决方案是将更新放入单个调用中：

    const handleEdit = (e) => {
        e.preventDefault();
         
        let errors = {};

         if (edit_user.email == "") {
             errors.email = "Please enter an email!"
        }

        if (edit_user.company == "") {
           errors.company = "Please enter company!"
       }

      // and then we call state with all the values, only once
      setEditUserError(errors);

React 无法在 onClick 函数中设置变量

React cannot set variable inside onClick function

javascript

reactjs

use-state