React Hook Form在TypeScript环境下remove()方法的正确使用方式

你的代码里有几个关键问题导致remove方法无法正常工作，调整方案如下：

1. 修正useForm默认值的配置方式 #

你直接把teamSize作为useForm的参数传入是错误的，正确做法是将默认值放在defaultValues选项中，这是React Hook Form初始化表单值的标准方式。

2. 给列表元素添加正确的key #

用fields数组中每个元素自带的id作为key，而非循环的index。删除元素后index会重新排序，React无法正确识别元素变化，会导致渲染异常进而影响remove方法执行。

3. 移除不必要的as any断言（推荐） #

定义明确的类型，避免类型模糊引发的潜在问题。

修改后的完整代码：

import { useForm, useFieldArray } from "react-hook-form";
import { Grid, Chip } from "@mui/material";

// 定义表单数据类型
type FormValues = {
  teamSize: Array<{
    teamMember: string;
  }>;
};

export default function YourComponent() {
  const { register, handleSubmit, errors, getValues, control } = useForm<FormValues>({
    defaultValues: {
      teamSize: [
        {
          teamMember: 'Rajesh',
        },
      ],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'teamSize',
  });

  return (
    <>
      {fields.map((item, index) => (
        <Grid 
          key={item.id}
          item xs={3} 
          sx={{ mr: 3, mb: 2 }}
        >
          <Chip 
            sx={{ borderRadius: '5px' }}
            label={item.teamMember} 
            onClick={() => remove(index)} 
            onDelete={() => remove(index)}                   
          />
        </Grid>
      ))}
    </>
  );
}

额外提示 #

• 确保使用的React Hook Form是最新版本，旧版本可能存在useFieldArray的已知bug。
• 检查control是否正确传递给useFieldArray，这是useFieldArray正常工作的核心依赖。

内容的提问来源于stack exchange，提问作者Dadasaheb Patil