如何在MUI Select中设置数组类型的默认值

核心问题排查 #

你的代码存在几个关键问题导致数组默认值无法生效：

• 未添加multiple属性：MUI Select要支持数组类型的选中值，必须显式开启多选模式。
• 误用原生<select>标签：你提到使用MUI Select组件，但代码里写的是原生<select>，需替换为MUI提供的<Select>组件。
• 默认值与选项不匹配：你的默认值[181, 182, 183]是数字数组，但每个MenuItem的value是数组类型（比如[185,186,187,188]），两者类型不匹配，无法触发默认选中。

修正后的代码示例 #

import { Select, MenuItem } from '@mui/material';
import { useState } from 'react';

// 你的VERTICLE数据
const VERTICLE = [
  { key: 184, label: "Entertainment", value: [185, 186, 187, 188] },
  { key: 185, label: "Another Category", value: [185, 189, 190] }
];

function VerticleSelector() {
  // 初始化状态为匹配选项的数组（支持多选时为数组的数组）
  const [selectedVerticle, setSelectedVerticle] = useState([VERTICLE[0].value]);

  return (
    <Select
      multiple
      value={selectedVerticle}
      onChange={(e) => setSelectedVerticle(e.target.value)}
      // 自定义选中值的显示格式
      renderValue={(selected) => selected.map(arr => arr.join(', ')).join(' | ')}
    >
      <MenuItem value={[]}>Select the Verticle</MenuItem>
      {VERTICLE.map(item => (
        <MenuItem key={item.key} value={item.value}>
          {item.label}
        </MenuItem>
      ))}
    </Select>
  );
}

关键说明 #

• multiple属性：必须添加该属性才能让Select支持数组类型的选中值（多选模式）。
• 值类型匹配：默认值必须与MenuItem的value类型一致——如果每个MenuItem的value是数组，那么默认值需是包含这些数组的数组（多选场景）或单个数组（单选场景）。
• 受控组件模式：使用value绑定状态替代defaultValue，更便于主动控制选中状态；若需非受控模式，也可改用defaultValue但需保证值匹配。

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