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

Question

由于 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 },
          });
        };

父组件始终获取输入组件的先前有效性。在子组件的状态发生变化后，是否有任何其他方法可以立即将数据传递给具有最新状态的父组件。

Answer 1

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

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

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

Passing State to parent immediately after updating React

parent-child

reactjs

react-props