MUI Select与MenuItem默认值不显示问题求助

问题根源 #

核心问题出在初始值时机不匹配和类型/属性冲突：

• 组件初始化时user是空对象，initialValues中的active为undefined，表单初始值不会自动随后端数据加载完成更新；
• 同时设置value和defaultValue会导致逻辑冲突，受控属性value会覆盖defaultValue；
• 若后端返回的is_active是字符串类型（如"true"/"false"），与MenuItem的布尔值value类型不匹配，会导致无法选中对应项。

解决方案 #

1. 动态生成表单初始值 #

使用useMemo依赖user生成initialValues，确保后端数据加载后表单能获取正确初始值：

import { useMemo } from 'react';

// ... 其他代码

const initialValues = useMemo(() => ({
  fullName: user.fullname || '',
  email: user.email || '',
  userName: user.username || '',
  organ: String(user.organization || ''),
  password: "",
  role: String(user.role || ''),
  active: user.is_active !== undefined ? user.is_active : false // 兜底默认值
}), [user]); // 当user更新时重新生成初始值

2. 修正Select组件配置 #

移除冗余的defaultValue，确保value与MenuItem的value类型完全匹配：

<Select
  name="active"
  labelId="active-label"
  id="active"
  onChange={handleChange}
  onBlur={handleBlur}
  value={values.active} // 确保此处为布尔值true/false
  error={touched.active && Boolean(errors.active)}
>
  <MenuItem value={true}>Yes</MenuItem>
  <MenuItem value={false}>No</MenuItem>
</Select>

3. 统一后端数据类型（若需要） #

如果后端返回的is_active是字符串类型，在数据获取时转换为布尔值：

async function getData(id) {
  try {
    const response = await fetch(`${state.baseUrl}users/${id}`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${state.loginToken}`,
      },
    });
    const fetchedUser = await response.json();
    // 转换is_active为布尔值
    fetchedUser.is_active = fetchedUser.is_active === 'true' || fetchedUser.is_active === true;
    setUser(fetchedUser);
  } catch (err) {
    console.error(err);
  }
}

4. 让表单响应初始值变化（针对Formik等库） #

若使用Formik，开启enableReinitialize属性，允许初始值更新时重新初始化表单：

<Formik
  initialValues={initialValues}
  enableReinitialize={true}
  validationSchema={/* 你的校验规则 */}
  onSubmit={/* 提交逻辑 */}
>
  {/* 表单内容 */}
</Formik>

验证步骤 #

1. 打印values.active，确认其值为布尔值true/false，而非undefined或字符串；
2. 确认user.is_active在数据加载完成后有正确的布尔值；
3. 确保未同时设置value和defaultValue。

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