使用 useState 问题在 React 中将数据从父级传递给子级答案

【问题标题】：Passing data from parent to child in React using useState problem使用 useState 问题在 React 中将数据从父级传递给子级
【发布时间】：2021-06-29 21:42:46
【问题描述】：

我有一个父功能组件，我从它打开一个对话框，其中包含一个必填字段（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)
}
    };

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

【问题讨论】：

标签： reactjs react-hooks react-props use-state

【解决方案1】：

React 更新是batched，因此即使您的代码是同步的，状态更新也会在下一个滴答中完成。因此，当您调用 props.saveData 时，您需要等待组件的一次 render 才能访问新的 props 数据。 props.errorMessage 不会立即更新。

const submitClicked = () => {
        props.saveData();
        props.errorMessage)// this is stale value
    };

您需要做的是聆听通过useEffect钩子对props.errorMessage的更改，然后做出相应的响应。像这样的：

 const submitClicked = () => {
        props.saveData();
    };

useEffect(()=>{
   if(props.errorMessage){
     setHideMessage(true)
   }else{
     setHideMessage(false)
   }
},[props.errorMessage])

您可能还需要稍微更改您的逻辑，以便您可以在 errorMessage 是 false 时消除歧义，因为数据尚未保存，因为 save 已完成，并且没有错误。

【讨论】：