react-hook-form id 没有用 useFieldArray 保存

Question

有人能找出我的代码有什么问题吗？我正在使用 react-hook-form 的 useFieldArray 并想为每个字段生成一个唯一的 id。我正在尝试使用 append 来做到这一点，但 id 字段以某种方式消失了。即使我更改了 keyname: 'newId'，这也不会记录到数据中。

我也在用MaterialUI.

我的代码：

...
    const { register, control, handleSubmit, errors } = useForm({
        defaultValues: {
          arrayName: {id: uuidv4(), name: "name goes here"}
        }
      });

    const { fields, remove, append } = useFieldArray(
        {
          control,
          name: "arrayName",
          // keyName: 'formId' // deafult and you can rename to others
        }
    );
...
                <TextField 
                    label="Test Type"
                    variant="outlined"
                    type="text"
                    name={`arrayName[${index}].name`}
                    defaultValue={`${field.name}`}
                    inputRef={register()}
                />
        <Button
            variant="contained"
            color="primary"
            size="large"
            className={classes.button}
            startIcon={<AddCircleIcon />}
            onClick={() => append({ id: uuidv4(), type: "", score: 0 })}
        >
            Add Array Item
        </Button>

稍后我有一个提交按钮调用这个：

    const onSubmit = data => {
        handleArrayChange(originalArray.id, { ...originalArray, ...data })
        history.push(`/newURL`)
    }

提前致谢！

Answer 1

根据 react-hook-form docs append 中给出的示例，参数对象 key 应与字段 name

匹配

.../ some codes
<TextField name={`arrayName[${index}].id`} />
<TextField name={`arrayName[${index}].type`} />
<TextField name={`arrayName[${index}].score`} />

.../ some codes
 <Button onClick={() => append({ id: uuidv4(), type: "", score: 0 })} >

react-hook-form id 没有用 useFieldArray 保存

react-hook-form id not saved with useFieldArray

javascript

reactjs

react-hook-form