React Native中解析与展示Axios返回数据遇问题求助

你的问题出在这几个核心点上：

1. 数据源引用错误 #

第一个写法里直接调用response.map，但response是Axios返回的完整响应对象，不是你需要的数组数据——你要的数组实际存在response.data.homes.home里。更关键的是，组件初始渲染时API请求还没完成，此时数据是undefined，直接调用map必然报错。

2. FlatList的data参数类型错误 #

第二个写法里用JSON.stringify(response.data.homes.home)把数组转成了字符串，但FlatList的data属性要求传入数组类型，字符串无法被遍历渲染，自然会触发"undefined is not an object"类错误。

正确实现步骤 #

第一步：初始化组件状态，处理异步数据加载 #

先给组件设置空数组作为初始状态，避免初始渲染时数据为undefined，再通过useEffect发起API请求并把数据存入状态：

import { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

export default function HomeList() {
  // 初始化空数组，避免初始渲染报错
  const [homeData, setHomeData] = useState([]);

  useEffect(() => {
    const fetchHomeData = async () => {
      try {
        const response = await axios.get('你的API地址');
        // 把正确的数组存入状态
        setHomeData(response.data.homes.home);
      } catch (err) {
        console.error('API请求失败:', err);
      }
    };

    fetchHomeData();
  }, []);

  // 后续渲染代码
}

第二步：用FlatList正确渲染数据 #

直接把状态里的数组传给FlatList的data，不要做字符串转换：

<FlatList
  data={homeData}
  renderItem={({ item }) => (
    <Text style={{ padding: 10 }}>{item.name} | 标识：{item.x_id}</Text>
  )}
  // 用你的关键标识x_id作为唯一key，比index更可靠
  keyExtractor={(item) => item.x_id}
/>

若不用FlatList，用map渲染需加判断 #

如果想用map渲染，必须先判断数组是否存在且有内容，避免报错：

<View>
  {homeData.length > 0 && homeData.map((item) => (
    <Text key={item.x_id} style={{ padding: 10 }}>{item.f_name}</Text>
  ))}
</View>

关键注意事项 #

• 异步获取的数据必须存入组件状态，不能直接在渲染阶段使用原始响应对象。
• 初始状态一定要设为空数组，避免首次渲染时因数据未加载完成触发undefined错误。
• 优先用数据中的唯一标识（比如你的x_id）作为列表项的key，不要用索引，避免列表更新时出现渲染异常或性能问题。

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