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

Question

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

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'。我真的不能在我的逻辑上有任何缺陷。你能帮我看看我的组件有什么问题吗？为什么我的布尔状态没有改变？

Answer 1

那是因为状态还没有更新，你发送的是旧值。我建议创建一个 useEffect() 触发器，只要 'isValid' 发生变化并在其主体中执行 props.onIsValid(isValid)。

示例：

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

Answer 2

状态更新是异步的。您要么在 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);
  };

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

I updated my boolean States in child component, but it is still original value in parent component

components

state

boolean

reactjs