使用API返回JSON数据的MUI Autocomplete组件无法正常运行问题求助

我帮你梳理下问题根源和修复步骤：

你看到的Warning: Failed prop type: The prop 'options' is marked as required...错误，核心原因是你给options传了getUsers.name——但getUsers是一个用户数组，数组本身没有name属性，所以这个值是undefined，不符合Autocomplete组件对options的必填要求。

另外代码里还有几处逻辑需要调整，我一步步给你修正：

1. 修正options的赋值逻辑 #

把options={getUsers.name}改成options={getUsers}，因为getUsers本身就是从API获取的用户数组，直接作为选项传入即可。

2. 配置选项的显示标签 #

Autocomplete需要明确知道如何从每个选项对象中提取显示文本，你需要添加getOptionLabel属性，指定用用户的name作为下拉选项的显示内容：

getOptionLabel={(option) => option.name}

3. 正确处理value属性 #

value应该存储当前选中的完整用户对象（而非单独的id），你需要新增一个状态来管理选中项，同时绑定onChange事件更新状态：

const [selectedUser, setSelectedUser] = useState(null);

// 然后在Autocomplete组件中添加
value={selectedUser}
onChange={(event, newValue) => {
  setSelectedUser(newValue);
}}

完整修正后的代码 #

import { useEffect, useCallback, useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

function App() {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null); // 存储选中的用户对象

  const fetchUsers = useCallback(async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const userData = await response.json();
      setUsers(userData);
    } catch (error) {
      console.error("获取用户数据失败:", error); // 用error日志更易识别问题
    }
  }, []);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={users} // 直接传入用户数组
      getOptionLabel={(option) => option.name} // 指定选项显示的文本
      value={selectedUser} // 绑定选中的用户对象
      onChange={(event, newValue) => {
        setSelectedUser(newValue); // 更新选中状态
      }}
      renderInput={(params) => <TextField {...params} label="选择用户" />}
    />
  );
}

export default App;

额外优化说明 #

• 我把状态变量名从getUsers改成了users，语义更清晰，避免和函数名混淆
• 错误捕获里用console.error代替console.log，更容易在控制台注意到异常信息
• 给TextField添加了label属性，让输入框的用途更明确

调整后，你的Autocomplete组件就能正常加载API返回的用户列表，并且正确处理选中值了。

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