如何为React中使用MenuItem的Select组件设置默认值

问题分析 #

你的代码目前存在几个关键问题导致默认值不生效：

• 初始渲染时userList是空数组，直接访问userList[0].id会触发Cannot read properties of undefined错误
• Select的defaultValue用的是用户id，但MenuItem的value绑定的是数组索引，两者类型不匹配，导致无法匹配选中项
• 异步加载用户列表后，没有同步更新Formik表单的字段值，导致表单初始值和Select选中状态不一致

解决方案 #

通过以下步骤修复问题：

1. 安全处理初始值，避免报错 #

在userList加载完成前，用可选链操作符或条件判断兜底，防止访问未定义属性报错。

2. 统一MenuItem的value为用户id #

直接用用户的唯一标识id作为MenuItem的value，比数组索引更稳定，也符合业务逻辑。

3. 异步加载完成后同步Formik字段值 #

在获取到用户列表的回调中，调用setFieldValue把第一个用户的id设置到表单字段，确保表单和Select状态同步。

4. 调整handleChange逻辑 #

因为MenuItem的value现在是用户id，所以handleChange里可以直接取e.target.value赋值给表单字段。

修改后的完整代码 #

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

const YourComponent = () => {
  const [userList, setUserList] = useState([]);
  const { setFieldValue } = useFormikContext();

  // 获取用户列表并设置默认表单值
  useEffect(() => {
    userService
      .listUsersFromTeamRHandAdmin()
      .then((res) => {
        setUserList(res);
        // 列表加载完成后，设置第一个用户为表单默认值
        if (res.length > 0) {
          setFieldValue("user.id", res[0].id);
        }
      });
  }, [setFieldValue]);

  const handleChange = (e) => {
    // 现在MenuItem的value是用户id，直接赋值即可
    setFieldValue("user.id", e.target.value);
  };

  return (
    <Select
      name="user"
      // 用可选链安全获取第一个用户的id，兜底为空字符串
      defaultValue={userList[0]?.id || ''}
      onChange={handleChange}
      style={{
        width: "100%",
        marginBottom: "1em"
      }}
    >
      {userList.map((user) => (
        <MenuItem key={user.id} value={user.id}>
          {user.firstName} {user.lastName}
        </MenuItem>
      ))}
    </Select>
  );
};

export default YourComponent;

关键细节说明 #

• 使用userList[0]?.id替代userList[0].id，利用可选链操作符避免数组为空时的报错
• MenuItem的key用用户id而非索引，确保列表更新时组件渲染的稳定性
• 在useEffect回调中同步Formik字段值，保证异步数据加载完成后表单状态及时更新
• 直接用userList.map遍历数组（示例中userList是数组），比Object.keys更简洁直观

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