react-native - 从 API 获取 JSON 信息

Question

我正在使用 Axios(Apisauce) 将 API 连接到 React Native App；这是我尝试使用 FlatList 在应用程序中显示的 JSON 文件：

{
  "data": {
    "sideMenu": {
      "url": "https://google.com",
      "icons": [
        {
          "id": 1,
          "url": "https://google.com",
          "status": 1
        },
      ]
    },
  }
}

当我尝试将其登录到控制台时，使用会console.log(response.data)返回所有 API 信息，但使用console.log(response.data.data)不会返回我正在寻找的对象！

我已经尝试过JSON.stringify()，或者toString()它们似乎都不起作用。

我的 Axios 代码：

const getServices = () => {
  const service = "https://api.team-grp.ir/app/json/services2.json/";

  return client.get(service);
};

我的源代码：

  const ServiceInfo = async () => {
    await getServices()
      .then((response) => {
        if (response.ok) {
          setServicesData(response.data.data);
        }
      })
      .catch((error) => {
        console.warn(error);
        setServicesData([]);
      });
  };


useEffect(() => {
ServiceInfo();
});

Answer 1

const ServiceInfo = async () => {
    await getServices()
      .then((response) => {
          return response.json();
      })
      .then((response) => {
         setServicesData(response.data);
       })
      .catch((error) => {
        console.warn(error);
        setServicesData([]);
      });
  };

尝试这个

Answer 2

您不应该将 async/await 与 .then/.cache 一起使用 ...此代码对我有用：（您还可以在此答案底部使用假的 getService 函数查看我的示例代码图像，您将看到已记录回答正确）

const ServiceInfo = () => {
    getServices().then((response) => {
        if (response.ok) {
          setServicesData(response.data.data);
        }
      })
      .catch((error) => {
        console.warn(error);
        setServicesData([]);
      });
  };


useEffect(() => {
   ServiceInfo();
}, []);