如何在React Native中用Axios获取数据并在FlatList中渲染？

我来帮你搞定这个问题！你的代码里有两个核心问题导致FlatList没法正常渲染接口数据，咱们一步步修正：

问题分析 #

• 未使用React状态管理异步数据：你直接写const res = res;完全无效，这个变量根本不是接口请求返回的响应对象，而且组件重新渲染时这个变量会被重置，没法持久化存储接口数据。
• 异步请求时机错误：直接在组件函数顶层发起Axios请求，会导致组件每次渲染都重复发请求，而且请求是异步的，组件初始渲染时没有可用数据，FlatList拿到无效数据源自然无法渲染。

修正后的代码 #

import Axios from "axios";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native-gesture-handler";

export default function App() {
  // 用useState创建状态存储接口数据，初始值为空数组
  const [data, setData] = useState([]);

  // 用useEffect在组件挂载时发起一次请求
  useEffect(() => {
    Axios({
      method: "GET",
      url: "https://bitbucket.org/!api/2.0/snippets/kamalo11/9nab7z/2ab26f49667b945a4e78679492fc7950bc1df3be/files/ecommerce.json",
    })
    .then((res) => {
      console.log(res);
      // 将接口返回的data存入状态，触发组件重新渲染
      setData(res.data);
    })
    .catch((err) => console.error(err));
  }, []); // 空数组依赖确保请求只执行一次

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.price}</Text>}
    />
  );
}

关键改动说明 #

• useState：创建data状态来存储接口返回的数据，初始为空数组，保证FlatList在请求完成前有合法的空数据源，避免报错。
• useEffect：把Axios请求放在这个钩子中，空数组依赖确保请求只会在组件首次挂载时执行一次，避免重复请求。
• 状态更新：在请求成功的回调里，通过setData(res.data)把接口返回的数据存入状态，状态更新后组件会自动重新渲染，FlatList就能拿到有效数据并渲染了。

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