更新 React 后立即将状态传递给父级答案

【问题标题】：Passing State to parent immediately after updating React更新 React 后立即将状态传递给父级
【发布时间】：2022-01-19 02:08:44
【问题描述】：

由于 react useState 像队列一样工作，我在访问子组件传递给父组件的数据时遇到问题。

Input.js

    const Input = (props) => {
         const [isValid, setIsValid] = useState(false);
         const [value, setValue] = useState("");
    
          <input id={props.id} className="self-start justify-self-start border-gray-400 border-solid border rounded shadow"
              name={props.name}
              type={props.type}
              onChange={(e) => {
                let valid = isNaN(value);
                setIsValid(valid);
                props.handleChange(e, valid);
              }}/>
}

parent.js 包含一个从子组件访问数据的函数

 const handleChange = (e, valid) => {
          setFormData({
            ...formData, 
            [addr.name]: { value: e.target.value, isValid: valid },
          });
        };

父组件总是获取输入组件之前的有效性。有没有其他方法可以在子组件的状态更改后立即将数据传递给具有最新状态的父组件。

【问题讨论】：

标签： reactjs parent-child react-props

【解决方案1】：

根据输入字段的当前值更新handleChange 回调中的valid 参数。

onChange={(e) => {
      let valid = isNaN(e.target.value);
      setIsValid(valid);
      props.handleChange(e, valid);
    }}

【讨论】：