与Mui DateTimePicker和react-hook-form不一致的错误行为

Question

我有一个DateTimePicker组件，我试图在一个由react-hook-form控制的表单中使用，验证非常简单，使用DateTimePicker上的disablePast prop来确保所选择的日期是在未来。

问题是，由于未知的原因，即使新值也是无效的，错误也不会在更改值时持续存在。例如:

1. 选择明天的日期-没有错误(应该是)
2. 将选择的日期更改为昨天-禁用过去错误(因为它应该是)
3. 将选择的日期更改为前一天-没有错误，但应该有

当返回时也表现出类似的行为，例如:

1. 输入两天前的日期-错误(应该是)
2. 日期增加一个，所以值是昨天-没有错误，但应该有
3. 再次增加日期1，因此值是今天-错误，但不应该有

当然，所有这些都是假设所选时间在当前时间之后，所以"today"被选中绝对不是过去。

我有一种感觉，Mui组件的"错误状态"和react-hook形式不同步，但我不知道如何修复它。

我在这里放了一个代码盒，在那里可以看到问题:

https://codesandbox.io/s/reverent-pare-yebckz?file=/src/App.js

我的代码也包含在这里:

import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { useForm, useController } from "react-hook-form";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"; // v6.0.4
import "dayjs/locale/en-gb";
const MyDateTimePicker = ({ name, control, error, setError }) => {
const { field } = useController({ name, control });
const handleError = (reason) => {
console.log(reason);
setError(name, {
type: "custom",
message: reason
});
};
return (
<DateTimePicker
{...field}
label="future date"
disablePast
onError={handleError}
slotProps={{
textField: {
error: !!error,
helperText: error?.message
}
}}
/>
);
};
export default function App() {
const {
control,
handleSubmit,
setError,
formState: { errors }
} = useForm({
mode: "all",
defaultValues: {
datetime: null
}
});
const onSubmit = (data) => console.log(data);
return (
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<MyDateTimePicker
name="datetime"
control={control}
error={errors?.datetime}
setError={setError}
/>
</form>
</div>
</LocalizationProvider>
);
}

我觉得我有点失去理智了，所以任何帮助都会非常感激。谢谢你

似乎setError可能是问题所在。那么，我如何将Mui的验证与react-hook-form的验证连接起来，使它们一起工作呢?

Answer 1

通过完全放弃setError并编写自己的验证作为react-hook-form规则的一部分来修复它。

工作示例:https://codesandbox.io/s/eloquent-kowalevski-0qdnyt?file=/src/App.js

Answer 2

这里，你得到了setError作为道具因此不会立即更新错误状态.

你不应该直接传递setState，因为setState函数不会根据文档立即改变状态。

您可以查看以下内容:

我们可以将setState作为props从一个组件传递到另一个组件，并从React中的子组件更改父状态吗?