我在子组件中更新了我的布尔状态，但它仍然是父组件中的原始值答案

【问题标题】：I updated my boolean States in child component, but it is still original value in parent component我在子组件中更新了我的布尔状态，但它仍然是父组件中的原始值
【发布时间】：2022-01-21 12:04:44
【问题描述】：

这是我的子组件表单提交处理程序

const formSubmitHandler = (evt) => {
    evt.preventDefault();
    const newUser = {
      name: username,
      age: Number(age),
    };
    if (newUser.name !== "" || newUser.age !== 0) {
      props.onCreateUser(newUser);
      evt.target[0].value = "";
      evt.target[1].value = "";
      return;
    }
    setIsValid(false);
    props.onIsValid(isValid);
  };

在此代码中，如果没有姓名输入或年龄输入，我将 isValid 状态更改为 false。然后，我将此状态值发送给我的父组件。

这是我的父组件

import { useState } from "react";
import "./NewUser.css";
import UserForm from "./UserForm";

const UserResults = (props) => {
  const createUserHandler = (userData) => {
    const userObj = {
      ...userData,
      id: Math.random().toString(),
    };

    props.onGetUserData(userObj);
  };

  const isInvalidHandler = (bool) => {
    console.log(bool);
  };

  return (
    <div>
      <UserForm
        onCreateUser={createUserHandler}
        onIsValid={isInvalidHandler}
      ></UserForm>
    </div>
  );
};

export default UserResults;

但是当我执行 console.log(bool) 时，该值仍然是 'true'。我的逻辑真的不能有任何缺陷。你能帮我看看我的组件出了什么问题吗？为什么我的布尔状态没有改变？

【问题讨论】：

标签： reactjs boolean components state

【解决方案1】：

状态更新是异步的。您可以在 useEffect() 内部编写（类似于 componentDidUpdate()）或直接使用布尔值调用父函数：

useEffect()

useEffect(() => { props.onIsValid(isValid); }, [isValid]);

之前调用父函数

const formSubmitHandler = (evt) => {
    evt.preventDefault();
    const newUser = {
      name: username,
      age: Number(age),
    };
    if (newUser.name !== "" || newUser.age !== 0) {
      props.onCreateUser(newUser);
      evt.target[0].value = "";
      evt.target[1].value = "";
      return;
    }
    props.onIsValid(false);
    setIsValid(false);
  };

【讨论】：

【解决方案2】：

这是因为状态尚未更新，而您发送的是旧值。我建议创建一个 useEffect() 女巫触发器，只要 'isValid' 发生变化并在其主体中执行 props.onIsValid(isValid)。

示例：

   useEffect(() => {
      props.onIsValid(isValid)
    }, [isValid])

【讨论】：