Reactjs 使用useState问题在React中将数据从父级传递到子级

我有一个父功能组件，从中打开一个对话框，其中包含一个必填字段（Fluent UI DatePicker）。我有一个乐趣，就是监视DatePicker中的更改，并将值发送给父级，在父级执行类似的验证

const [errorMessage, setErrorMessage] = useState(false)

function isDatePickerFieldEmpty() {
        if (props.DueDate === undefined || props.DueDate === null) {
            return false
        } else {
            return true
        }
    }
    
    function isDatePickerValid():Boolean {
        var counter = 0;
        if(!isDatePickerFieldEmpty()){
            setErrorMessage(true)
            counter++
        } else {
            setErrorMessage(false)
        }
        if (counter == 0) {
            return true
        } else {
            return false
        }
    }

//function that triggers from dialog on Submit click
 const saveData = () => {
        if(isDatePickerValid()){
            //save function
        }
    }

其思想是，当isDatePickerValid返回false时，会通过props将TRUE发送给子对话框，并且在那里我会有条件地呈现字段的错误消息和样式。这就行了。问题是当我在对话框中执行此操作时

 const submitClicked = () => {
        props.saveData();
        if(props.errorMessage){
            setHideDialog(false)
            props.hideDateDialog(true)
        } else {
            setHideDialog(true)
            props.hideDateDialog(false)
}
    };

---

当我在对话框中单击submit时，它会在parent中触发save fun，save fun会将setErrorMessage触发为true或false，并将其发送到Dialog。但错误消息数据延迟。例如，如果我没有输入日期，并单击“提交”，则应将“真”发送到对话框，并对必填字段进行样式设置，而不是关闭对话框。相反，它将FALSE发送到对话框并将其关闭，当我再次打开对话框时，它将发送TRUE并激活条件样式。我父母的错误留言迟到了。我做错了什么？

React更新是批处理的，因此即使代码是同步的，状态更新也会在下一个刻度中完成。因此，当您调用

props.saveData

时，需要等待组件的一次渲染以访问新的props数据。

props.errorMessage

不会立即更新

const submitClicked=（）=>{
props.saveData（）；
props.errorMessage）//这是过时的值
};

您需要做的是通过

useffect

hook收听

props.errorMessage

的更改，然后做出相应的响应。大概是这样的：

const submitClicked=（）=>{
props.saveData（）；
};
useffect（（）=>{
如果（道具错误消息）{
setHideMessage（真）
}否则{
setHideMessage（假）
}
}，[props.errorMessage]）

您可能还需要稍微更改逻辑，以便在

errorMessage

为

false

时消除歧义，因为数据尚未保存，并且

save

已完成，并且没有错误