Question

我有一个父功能组件，我从中打开一个带有一个必填字段的对话框（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时，它会触发父级的保存乐趣，保存乐趣应该触发setErrorMessage为true或false，并将其发送到对话框。但是错误消息数据晚了。例如，如果我不输入日期，然后单击提交，它应该向对话框发送 TRUE，并为必填字段设置样式，而不是关闭对话框。相反，它向对话框发送 FALSE 并关闭它，当我再次打开对话框时，它发送 TRUE 并激活条件样式。我来自父母的错误消息迟到了。我做错了什么？

Answer 1

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

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

您需要做的是通过 props.errorMessage 钩子监听 useEffect 的变化，然后做出相应的响应。像这样：

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

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

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

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

1 个答案: