如果默認值是數組，則 React Hook 表單不更新值

Question

我正在創建一個動態生成的表單，它從模板中讀取文件。 我有一系列“問題”，它們映射到一個反應鈎子形式。 我使用的 defaultValues 是一個對象數組。 我遇到的問題是在 react-hook-form 控制器中使用 react-select ，因為如果它是數組，它不會設置表單狀態。 在我的測試中，如果默認值不是數組，它可以正常工作。 請參閱我的 MRE 代碼示例

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: questions,
    });

    const onSubmit = (data: any) => console.log(data);

    return (
        <form onSubmit={methods.handleSubmit(onSubmit)}>
            <Controller
                name="0.value"
                control={methods.control}
                render={({ field }) => (
                    <Select
                        {...field}
                        value={options.find((c) => c.value === field.value)}
                        options={options}
                        onChange={(e) => field.onChange(e?.value)}
                    />
                )}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

什么是讓 react-hook-form 控制器組件（如 react-select）與一組 defaultValues 一起工作的最佳方法

Answer 1

您遇到的問題是由於您的默認值是數組而不是對象。 您應該使用您選擇的鍵將您的問題包裝在一個對象中。 請看例子。

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: {questions},
    });

const onSubmit = (data: any) => console.log(data);

return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Controller
            name="questions.0.value"
            control={methods.control}
            render={({ field }) => (
                <Select
                    {...field}
                    value={options.find((c) => c.value === field.value)}
                    options={options}
                    onChange={(e) => field.onChange(e?.value)}
                />
            )}
        />
        <button type="submit">Submit</button>
    </form>
);