如何设置 Select 组件的默认值与 MenuItem 作为选项进行反应

Question

我一直在想，当我们使用 MenuItem 组件作为选项时，如何在 React 中设置 Select 的默认值

首先，我得到一个具有以下 useEffect 的用户列表，它返回一个用户列表（具有 id、firstName 和 lastName 等属性的对象）

  const [userList, setUserList] = useState([]);
  //Get users
  useEffect(() => {
    userService
    .listUsersFromTeamRHandAdmin()
      .then((res) => {
        setUserList(res)
    });
  }, [])
  
  const {
    setFieldValue
  } = useFormikContext();

  const handleChange = (e) => {
    setFieldValue("user.id", setUserList[e.target.value].id)
  }

我有以下 Select 组件，我想在其中将 UserList 的第一个用户 ID 作为默认值，并显示该用户的名字和姓氏。

<Select
    name="user"
    defaultValue={userList[0].id || ''}
    onChange={(e) => handleChange(e)}
    style={{
        width: "100%",
        marginBottom: "1em"
    }}
>
    {
        Object.keys(userList).map((e, keyIndex) => {
            return (
                <MenuItem key={keyIndex} value={e}>
                    {userList[e].firstName} {userList[e].lastName}
                </MenuItem>
            );
        })
    }
</Select>

有人知道我该怎么做吗？

编辑：

例如，UserList 的数组将包含如下内容：

0: Object { id: 1, firstName: "Britta", lastName: "Perry", … }
​
1: Object { id: 2, firstName: "Troy", lastName: "Barnes", … }

Answer 1

要在 MaterialUi Select 组件中有一个默认值，您应该提供一个存在于您的选择中的默认值，请试试这个：

import "./styles.css";
import { Select, MenuItem } from "@mui/material";
export default function App() {
  const arr = [
    { id: 1, firstName: "Britta", lastName: "Perry" },
    { id: 2, firstName: "Troy", lastName: "Barnes" }
  ];
  return (
    <div className="App">
      <Select
        name="user"
        defaultValue={arr[0].firstName + arr[0].lastName || ""}
        onChange={(e) => handleChange(e)}
        style={{
          width: "100%",
          marginBottom: "1em"
        }}
      >
        {arr.map((el) => (
          <MenuItem key={el.id} value={el.firstName + el.lastName}>
            {el.firstName + el.lastName}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
}

如您所见，defaultValue 和 menuItem 具有相同的语法，这是我为此创建的工作演示

您可以在 firstName 和 lastName 之间添加分隔符，但在 defaultValue 中也保持相同的语法。