material-tailwind/react组件动态选项无法加载问题求助

我使用material-tailwind/react库的Select和Option组件实现分类联动菜单，需根据分类选择框的选中值动态加载子分类选项。尝试了两种实现方式，第一种出现TypeError错误，第二种无报错但子分类选项无法加载，先排查代码问题：

方法1：动态修改值 #

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

<Select label="Select Subcategory" value="">
  {formikProps.values.category !== "" &&
    categories
      .find((cat) => cat.category === formikProps.values.category)
      ?.subcategory.map((option) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
</Select>;

错误信息 #

TypeError: Cannot read properties of null (reading 'props')
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26581:27
    at http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:737:25
    at mapIntoArray (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:660:31)
    at Object.mapChildren [as map] (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:736:11)
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26580:116
    at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:12171:26)
    at updateForwardRef (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:14327:28)
    at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:15934:22)
    at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19749:22)
    at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19194:20)

问题分析与修正 #

当formikProps.values.category为空时，Select组件的children会是undefined，而material-tailwind的Select组件无法处理这种情况，导致报错。需要给空状态下的children设置默认值（比如null或空Fragment）：

<Select label="Select Subcategory" value="">
  {formikProps.values.category !== "" 
    ? categories.find((cat) => cat.category === formikProps.values.category)?.subcategory.map((option) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))
    : null}
</Select>

方法2：状态管理 #

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

const [category, setCategory] = useState<string[]>([]);

<div>
  <div>
    <Select
      label="Select Category"
      onChange={(e) => {
        setCategory(
          categories.find((item) => item.category === e)?.subcategory ?? []
        );
      }}
    >
      {categories.map((category) => (
        <Option key={category.category} value={category.category.toLowerCase()}>
          {category.category}
        </Option>
      ))}
    </Select>
  </div>
  <div>
    <Select label="Select Subcategory" value="">
      {category.map((option: string) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
    </Select>
  </div>
</div>;

现象 #

无报错，但子分类选项无法加载：

问题分析与修正 #

分类Option的value被转成小写（category.category.toLowerCase()），但onChange回调里用e直接匹配categories中原始的大写category字段，导致找不到匹配项，setCategory只能拿到空数组，子分类自然没有选项。

有两种修正方式：

1. 保持Option的value为原始字符串，不转小写：

{categories.map((category) => (
  <Option key={category.category} value={category.category}>
    {category.category}
  </Option>
))}

2. 在onChange里把e转成与原始字段匹配的格式再查找：

onChange={(e) => {
  const matchedCategory = categories.find(item => 
    item.category.toLowerCase() === e
  );
  setCategory(matchedCategory?.subcategory ?? []);
}}

内容的提问来源于stack exchange，提问作者shubham salunke