ReactJS：状态变量未按预期更新

Question

所以我正在学习反应，作为练习，我制作了一个基本的添加用户应用程序。只有在两个输入字段都有效的情况下，才应插入数据。问题是即使验证失败，应用程序仍会在字段中输入数据。我不确定为什么，因为我已经明确添加了条件：

const onSubmit = (event) => {
    event.preventDefault();
    validateUser(newUser);
    if (!showModal.display) {
      console.log(showModal.display);
      props.onAddingNewUser(newUser);
      setNewUser({
        username: "",
        age: "",
      });
    }
  };

这是我的应用的 link 沙箱：https://codesandbox.io/s/beautiful-wilbur-j35mmi

尝试在不输入任何数据的情况下单击提交按钮，您会看到它仍然填充在列表中。

我仍在学习 React，所以如果有人能详细说明我在这里做错了什么，那就太好了。

谢谢！

Answer 1

原因是每次关闭错误框时都会再次将 display 转换为 false，所以无论最后是什么 if statmet:

  validateUser(newUser);
    if (!showModal.display){
...more code
}

将始终为真，因为即使用户无效，当您关闭错误框时显示将再次为假，并且 if 语句将运行.

如果你想解决这个问题，你可以 return false 或 true validateUser 还有更多方法可以解决这个问题，这只是一种方法。

Answer 2

或者，您可以在提交新用户之前检查验证。下面是示例。

if(user.username !== "") 和 if(user.username) 本质上是一样的，if 语句将评估为真。此外，您不需要从可以直接从您的状态访问的参数传递 newUser。

  const validateUser = () => {
    let bool = true;
    if (newUser.username && newUser.age && !isNaN(parseInt(newUser.age))) {
      setShowModal({
        display: false,
        text: "",
      });
    } else {
      bool = false;
      console.log("Both are empty");
      setShowModal({
        display: true,
        text: "Please enter a valid username and age (non-empty values).",
      });
    }

    if (!newUser.username) {
      bool = false;
      // Username is empty
      console.log("Username is empty");
      setShowModal({
        display: true,
        text: "Please enter a valid age (> 0).",
      });
    }

    if (!newUser.age) {
      // Age is empty
      bool = false;
      console.log("Age is empty");
      setShowModal({
        display: true,
        text: "Please enter a valid username (non-empty values).",
      });
    }
    console.log("Validation End:", showModal);
    return bool;
  };



  const onSubmit = (event) => {
    event.preventDefault();
    if (!showModal.display && validateUser()) {
      console.log(showModal.display);
      props.onAddingNewUser(newUser);
      setNewUser({
        username: "",
        age: "",
      });
    }
  };

ReactJS：状态变量未按预期更新

ReactJS: State variable not updating as expected

reactjs

state

react-state