react-hook-form id 未使用 useFieldArray 保存

Question

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

我也在使用 Material UI。

我的代码：

...
    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 })} >