React自定义Hook返回对象而非数组导致MUI Autocomplete报错

问题核心原因 #

你的useFetchGames Hook中，fetchData是异步函数，调用它会直接返回Promise对象（typeof为object），而你在useEffect里直接把这个Promise赋值给了gameSearch状态，导致后续searchOptions变成了Promise而非预期的数组，所以Autocomplete执行map/filter时报错。

修复步骤 #

1. 正确处理异步请求的结果 #

在useEffect内部用异步函数包裹逻辑，等待fetchData解析完成后再更新状态：

useEffect(() => {
  const fetchAndSetData = async () => {
    if (searchString) {
      const data = await fetchData(searchString);
      setGameSearch(data || []);
    } else {
      setGameSearch([]);
    }
  };
  fetchAndSetData();
}, [searchString]);

2. 优化generateSearchOptions函数 #

原函数遍历逻辑冗余，改成更简洁的写法：

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

3. 处理请求错误的边界情况 #

在fetchData中添加错误捕获后的兜底逻辑，避免请求失败时返回undefined：

async function fetchData(searchString) {
  try {
    const res = await axios.post("/api/games", { input: searchString });
    return generateSearchOptions(res.data);
  } catch (err) {
    console.log(err);
    return []; // 请求失败时返回空数组
  }
}

完整修复后的Hook代码 #

import axios from "axios";
import { useEffect, useState } from "react";

export default function useFetchGames(searchString) {
  const [gameSearch, setGameSearch] = useState([]);

  useEffect(() => {
    const fetchAndSetData = async () => {
      if (searchString) {
        const data = await fetchData(searchString);
        setGameSearch(data);
      } else {
        setGameSearch([]);
      }
    };
    fetchAndSetData();
  }, [searchString]);

  return gameSearch;
}

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

async function fetchData(searchString) {
  try {
    const res = await axios.post("/api/games", { input: searchString });
    return generateSearchOptions(res.data);
  } catch (err) {
    console.log(err);
    return [];
  }
}

组件调用说明 #

原组件调用代码无需修改：

const searchOptions = useFetchGames(inputValue);

此时searchOptions始终为数组（初始空数组、请求中保持之前的数组、请求完成后更新为新数组），Autocomplete可以正常执行map/filter操作。

内容的提问来源于stack exchange，提问作者Qoussay El Akkari