React Hook Form结合MUI Field Array：独立值状态问题求助

核心问题分析 #

当前所有分类项共享同一主分类状态，导致新增或切换主分类时，之前已选的子分类列表被覆盖。本质是未给每个Field Array项分配独立的状态存储空间，所有项共用了全局的主分类变量。

解决步骤 #

• 调整数据存储结构：将Field Array的每个项从单一子分类ID，改为包含主分类ID和子分类ID的对象，确保每个分类项的状态独立。
• 绑定独立字段：在每个分类项组件中，通过useController分别绑定当前项的mainCategoryId和subCategoryId，替代全局状态管理。
• 渲染对应子分类：根据当前项的mainCategoryId筛选对应子分类，而非依赖全局选中值。

关键代码修改 #

1. 分类项组件重构：

import { useFormContext, useController } from "react-hook-form";
import { Box, Select, MenuItem, Button } from "@mui/material";

// 示例主分类数据，可替换为实际业务数据
const mainCategories = [
  { id: "1", name: "数码产品", subCategories: [{ id: "1-1", name: "手机" }, { id: "1-2", name: "电脑" }] },
  { id: "2", name: "服饰", subCategories: [{ id: "2-1", name: "男装" }, { id: "2-2", name: "女装" }] }
];

const CategoryItem = ({ index, remove }) => {
  const { control } = useFormContext();

  // 绑定当前项的主分类字段
  const { field: mainCategoryField } = useController({
    name: `categories[${index}].mainCategoryId`,
    control,
    defaultValue: ""
  });

  // 绑定当前项的子分类字段
  const { field: subCategoryField } = useController({
    name: `categories[${index}].subCategoryId`,
    control,
    defaultValue: ""
  });

  // 根据当前项的主分类ID获取对应子分类
  const currentMainCat = mainCategories.find(cat => cat.id === mainCategoryField.value);
  const subCats = currentMainCat ? currentMainCat.subCategories : [];

  return (
    <Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "center" }}>
      <Select
        value={mainCategoryField.value}
        onChange={(e) => mainCategoryField.onChange(e.target.value)}
        placeholder="选择主分类"
        fullWidth
        sx={{ minWidth: 200 }}
      >
        <MenuItem value="">选择主分类</MenuItem>
        {mainCategories.map(cat => (
          <MenuItem key={cat.id} value={cat.id}>{cat.name}</MenuItem>
        ))}
      </Select>

      {subCats.length > 0 && (
        <Box sx={{ display: "flex", gap: 1 }}>
          {subCats.map(subCat => (
            <Button
              key={subCat.id}
              variant={subCategoryField.value === subCat.id ? "contained" : "outlined"}
              onClick={() => subCategoryField.onChange(subCat.id)}
            >
              {subCat.name}
            </Button>
          ))}
        </Box>
      )}

      <Button color="error" onClick={() => remove(index)}>删除</Button>
    </Box>
  );
};

export default CategoryItem;

2. 表单提交处理（提取子分类数组）：

const onSubmit = (data) => {
  // 过滤掉未选择子分类的项，提取有效子分类ID数组
  const validSubCategoryIds = data.categories
    .map(item => item.subCategoryId)
    .filter(id => id);
  
  // 后续处理逻辑，比如提交到后端
  console.log("最终收集的子分类ID：", validSubCategoryIds);
};

更优实现建议 #

• 添加表单验证：
  • 用react-hook-form的验证规则限制Field Array最多3项：maxLength: {value: 3, message: "最多选择3个分类"}
  • 验证每个分类项必须选择主分类和子分类，避免无效数据提交
• 提升用户体验：
  • 选择主分类后自动选中第一个子分类，减少用户操作
  • 禁用已选中的子分类选项，防止重复选择
• 样式优化：
  • 给未选择分类的项添加提示样式
  • 调整子分类按钮的布局，避免换行混乱
• 数据逻辑封装：
  • 将分类数据的筛选、格式化逻辑封装成自定义hooks，减少组件内代码冗余

内容的提问来源于stack exchange，提问作者Youngjun Woo