如何使用自动完成 (MUI) 显示我的选项？

Question

我正试图帮助我的朋友弄清楚为什么自动完成没有显示任何内容。下面是代码：

var names = [];
const schoolList = async () => ( await axios.get("http://localhost:5000/api/grabUnivNames/")
    .then((res) => {

      // schoolList =  JSON.stringify(res.data.msg)
      names = res.data.msg.map(user => user.school_name);;
      console.log(names)
      // return res.data.msg.map(user => user.school_name);
    })
    .catch((error) => {
      console.log("ERROR");
      console.log(error);
    })
  );
schoolList();

return() 自动完成：

        <Autocomplete
            options={names}
            sx={{ width: 300 }}
            renderInput={(params) => <TextField {...params} label="School Name" />}
          />

names 包含的内容：

显示的内容：

我今天才开始学习Autocomplete，但我觉得问题可能在于他如何获取names或者names是如何格式化的，但我对Autocomplete也很陌生。

如何让 names 显示在下拉列表中？

Answer 1

首先，我假设您的数据获取正确完成并且您使用了 React functional based components。您将需要 2 个主要要求来实现您想要的

首先用 useState hook 替换普通变量 names names 数组和 loading 布尔值，因为普通变量在多个渲染时不会有动态值
MUI Autocomplete 支持 async 操作，因此您将 getSchoolList 处理程序附加到 onOpen prop 和 loading prop，以便组件在加载时显示进度

const [names,setNames] = React.useState([])
const [loading, setLoading] = React.useState(false)
const getSchoolList = () => {
setLoading(true)
axios.get("http://localhost:5000/api/grabUnivNames/")
    .then((res) => {

      // schoolList =  JSON.stringify(res.data.msg)
      const namesArr = res.data.msg.map(user => user.school_name)
      setNames(namesArr)
      // return res.data.msg.map(user => user.school_name);
    })
    .catch((error) => {
      console.log("ERROR");
      console.log(error);
    }).finally(() => setLoading(false))
}

<Autocomplete
            options={names}
            onOpen={() => getSchoolList()}
            loading={loading}
            sx={{ width: 300 }}
            renderInput={(params) => <TextField {...params} label="School Name" />}
          />

如何使用自动完成 (MUI) 显示我的选项？

How do I get my options to display with Autocomplete (MUI)?

reactjs

material-ui