我使用的是一个MUI自动完成字段，它接受一个数组作为选项。我创建了这个钩子，它接受输入值，并根据它获取API。下面是它的代码：

import axios from "axios";
import { useEffect, useState } from "react";
export default function useFetchGames(searchString) {
  const [gameSearch, setGameSearch] = useState([]);

  useEffect(() => {
    if (searchString) setGameSearch(fetchData(searchString));
  }, [searchString]);

  return gameSearch;
}

const generateSearchOptions = (array) => {
  const tempArray = [];
  array.map((item) => {
    tempArray.push(item.name);
  });
  return tempArray;
};

async function fetchData(searchString) {
  const res = await axios
    .post("/api/games", { input: searchString })
    .catch((err) => {
      console.log(err);
    });

  return generateSearchOptions(res.data);
}

然后我在包含autocomplete元素的组件中调用这个钩子。

const searchOptions = useFetchGames(inputValue);

问题是，useFetchGames应该返回一个数组，因为状态是一个数组。但是每当输入改变时，我就会得到一个错误，你不能过滤或Map一个对象。基本上Autocompolete元素试图MapsearchOptions，但它不是一个数组。我甚至试图用log(typeof searchOptions);记录它的类型，它返回一个对象。我不明白我做错了什么。
编辑：这是res.data的日志。它是一个对象数组。这就是为什么我把它重新Map成一个只有名称的数组。