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

Question

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

这是组件

function DatePickerField(props) {

    const { field , studentValues, control} = props;
    const classes = useStyle();
    const [date, setDate] = useState(null);
   
    
    const handleChange = (date) => {
        setDate(date)
               
    }

    

    // 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
    useEffect(() => {
        if (studentValues) {
            const dataStudentArranged = DataStudent(studentValues);
            dataStudentArranged.forEach((card) => {
                card.cardValues.forEach((cardValue) => {
                    
                    if (cardValue.formName === field.formName) {
                        const dateObject = fromUnixTime(cardValue.value/1000)
                        setDate(dateObject)
                        console.log('date object =>',dateObject)
                    }
                })
            })
        }
    }, []);

    return (
        <TableRow>
            <TableCell>
                <Controller defaultValue={date} name={field.formName} control = {control}
                as = {
                <DatePicker 
                    className={classes.datePicker}
                    inputVariant = "outlined"
                    label={field.label}
                    value={date} 
                    onChange={handleChange}
                    autoOk
                    variant="inline"
                    format= "dd, MMMM yyyy"
                    size="small"
                    />
                } 
                />
            </TableCell>
        </TableRow>
    )
}

export default DatePickerField

谢谢!

Answer 1

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

基本上，当使用 react-hook-form 和 control 属性时，我们应该使用 setValue 函数 https://react-hook-form.com/api#setValue