创建编辑表单时，useEffect 不会更新react-hook-form 的默认值

Question

I\xc2\xb4m 尝试在渲染编辑表单组件时填充material-ui datepicker字段的值，我可以在控制台中看到日期对象正在正确创建，但它没有传递到状态，不知道我是什么\xc2\xb4m 做错了。

\n

这是组件

\n

\nfunction DatePickerField(props) {\n\n    const { field , studentValues, control} = props;\n    const classes = useStyle();\n    const [date, setDate] = useState(null);\n   \n    \n    const handleChange = (date) => {\n        setDate(date)\n               \n    }\n\n    \n\n    // Check if the input name of the field we get from knack match the input name of the form and if yes display the value\n    useEffect(() => {\n        if (studentValues) {\n            const dataStudentArranged = DataStudent(studentValues);\n            dataStudentArranged.forEach((card) => {\n                card.cardValues.forEach((cardValue) => {\n                    \n                    if (cardValue.formName === field.formName) {\n                        const dateObject = fromUnixTime(cardValue.value/1000)\n                        setDate(dateObject)\n                        console.log('date object =>',dateObject)\n                    }\n                })\n            })\n        }\n    }, []);\n\n    return (\n        <TableRow>\n            <TableCell>\n                <Controller defaultValue={date} name={field.formName} control = {control}\n                as = {\n                <DatePicker \n                    className={classes.datePicker}\n                    inputVariant = "outlined"\n                    label={field.label}\n                    value={date} \n                    onChange={handleChange}\n                    autoOk\n                    variant="inline"\n                    format= "dd, MMMM yyyy"\n                    size="small"\n                    />\n                } \n                />\n            </TableCell>\n        </TableRow>\n    )\n}\n\nexport default DatePickerField\n\n\n

\n

谢谢！

\n

Answer 1

问题出在react-hook-form上，即使在使用useEfect之后它总是传递默认值，这个问题帮助我解决了这个问题：https ://stackoverflow.com/a/62243132/9813493

基本上，当将react-hook-form与control prop一起使用时，我们应该使用setValue函数https://react-hook-form.com/api#setValue