在App.js中调用getData()获取JSON数据返回undefined求助

你的问题出在**api.js中的getData函数没有返回实际的数据**。虽然你在.then回调里return json.data，但这个返回值只属于回调函数本身，并不会传递给外层的async函数；再加上你没有返回axios.get生成的Promise，最终getData函数默认返回undefined。

修复方案 #

方案1：统一使用async/await + try/catch（推荐） #

替换.then/.catch，用更清晰的async/await语法处理异步：

// api.js
export const getData = async function () {
  try {
    const json = await axios.get(
      "blabla",
      {
        headers: {
          Authorization: `blabla`,
        },
      }
    );
    if (json && json.status === 200) {
      return json.data;
    }
    // 可选：处理状态码非200的情况
    return null;
  } catch (e) {
    console.log(e);
    // 可选：抛出错误让调用方处理
    // throw e;
    return null;
  }
};

方案2：保留.then/.catch但返回Promise链 #

如果想继续使用.then语法，需要让getData直接返回axios.get的Promise链：

// api.js
export const getData = function () {
  return axios
    .get(
      "blabla",
      {
        headers: {
          Authorization: `blabla`,
        },
      }
    )
    .then((json) => {
      if (json && json.status === 200) {
        return json.data;
      }
      return null;
    })
    .catch((e) => {
      console.log(e);
      return null;
    });
};

验证修复 #

修改后，App.js中的res就能正确拿到数据，之后可以正常存入状态：

const getDataFunc = async () => {
    const res = await getData();
    console.log(res); // 现在会打印正确的数据
    if (res) {
      setDropdown(res?.attributes?.items[3]?.options);
    }
};

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