React+Axios调用Context接口函数返回undefined问题求助

核心问题 #

你的代码存在两个关键问题导致返回值为undefined：

1. getPets函数未返回数据 #

原函数中，.then回调里的return res.data仅属于回调函数的返回值，并未被外层的getPets函数返回。async函数默认返回undefined，除非你明确返回请求结果。

2. 组件中未正确处理异步调用 #

getPets是异步函数，调用后返回的是Promise对象，直接执行setPets(getPets())会把状态设置为Promise，而非实际请求到的数据。必须等待Promise完成后再更新状态。

修正后的代码 #

Context文件（修正getPets） #

推荐使用try/catch替代then/catch，代码更简洁直观：

const getPets = async () => {
  try {
    const res = await axios.get('http://localhost:1337/api/pets?populate=*');
    return res.data;
  } catch (err) {
    console.log(err);
    return []; // 出错时返回空数组，避免状态变为undefined
  }
};

如果坚持使用then/catch，需要确保整个请求链被返回：

const getPets = async () => {
  return await axios.get('http://localhost:1337/api/pets?populate=*')
    .then(res => res.data)
    .catch(err => {
      console.log(err);
      return [];
    });
};

组件文件（修正状态更新逻辑） #

在useEffect中创建异步函数，等待getPets返回结果后再更新状态：

const [pets, setPets] = useState([]);

useEffect(() => {
  const fetchAndSetPets = async () => {
    const petData = await getPets();
    setPets(petData);
  };
  fetchAndSetPets();
}, []);

// 建议把console.log放在useEffect里，更清晰追踪状态变化
// useEffect(() => {
//   console.log(pets);
// }, [pets]);

return <div>{/* 这里写你的渲染逻辑 */}</div>;

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