reactjs - 在 useFieldArray 中将默认值设置为 Controller

Question

对 react-hook-forms 的误解。

我有一个用于编辑某些内容的表单。表单包含 fieldArray。我使用默认值在 useForm Hook 中设置初始 formData

const methods = useForm({ defaultValues: defaultValues });

默认值在哪里

const defaultValues = {
  test: [
    {
      name: "useFieldArray1"
    },
    {
      name: "useFieldArray2"
    }
  ]
};

还有字段数组。这里我使用的是 Controller(这是简化的情况 - 实际上自定义输入 Controller 更复杂)

 <ul>
    {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <Controller 
                    name={`test[${index}].name`}
                    control={control}
                    render={({value, onChange}) => 
                    <input onChange={onChange} defaultValue={value} />}
              />
              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
</ul>

当表单被渲染时，一切都很好。默认值显示在输入字段中。但是当我删除所有字段并单击追加时 - 新字段不为空...显示默认值再次。而且它只发生在 Controller 上。为什么会这样？我该如何避免？

拜托，这是 CodeSandBox 链接。删除输入并按附加以重现我所说的内容。

https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-7mzyw?file=/src/fieldArray.js

谢谢

Answer 1

<Controller
            name={name}
            rules={rules}
            defaultValue={defaultValue ? defaultValue : ''}
            render={({ field, fieldState }) => {
                return (
                    <TextField
                        inputRef={field.ref}
                        {...props}
                        {...field}
                        label={label}
                        value={field.value ? field.value : ''}
                        onChange={(event) => {
                            field.onChange(event.target.value);
                            props.onChange && props.onChange(event);
                        }}
                        style={props.style || { width: '100%' }}
                        helperText={fieldState?.error && fieldState?.error?.message}
                        error={Boolean(fieldState?.error)}
                        size={props.size || 'small'}
                        variant={props.variant || 'outlined'}
                        fullWidth={props.fullWidth || true}
                    />
                );
            }}
        />