使用Axios解析数据插入React Native Elements ListItem报错求助

核心错误点 #

1. 异步请求处理错误
   你直接将axios请求结果赋值给json，但axios返回的是Promise对象而非实际数组数据，Promise没有map方法，这就是触发TypeError: undefined is not a function的直接原因。同时，then回调里的const json是局部变量，外部的json根本没拿到接口返回的真实数据。

2. 数组遍历逻辑错误
   在json.map((l, i) => ...)中，l已经是数组中的单个对象（比如{name: "高雄終端管制區 - 高雄雷達席", status: "Offline"}），你却用l[i].name访问属性——l不是数组，l[i]会返回undefined，进而导致读取name属性失败。

3. 缺失React状态管理
   React组件渲染是同步过程，你需要用状态存储异步加载的数据，确保数据更新时组件能自动重新渲染。

修复后的代码 #

import { useState, useEffect } from 'react';
import { ScrollView } from 'react-native';
import { ListItem } from '@rneui/themed';
import axios from 'axios';

function HomeScreen() {
  // 初始化状态存储接口数据
  const [data, setData] = useState([]);

  useEffect(() => {
    // 组件挂载时发起异步请求
    const fetchData = async () => {
      try {
        const response = await axios({
          method: 'get',
          url: `${baseUrl}`,
        });
        // 更新状态触发组件重新渲染
        setData(response.data);
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    fetchData();
  }, []); // 空依赖数组确保仅执行一次

  return (
    <ScrollView>
      {data.map((item, index) => (
        <ListItem key={index} bottomDivider>
          <ListItem.Content>
            <ListItem.Title>{item.name}</ListItem.Title>
            <ListItem.Subtitle>{item.status}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))}
    </ScrollView>
  );
}

关键修改说明 #

• 用useState定义data状态，初始为空数组，避免渲染时因undefined调用map报错。
• 用useEffect包裹异步请求，确保仅在组件挂载时发起一次请求，请求成功后通过setData更新状态。
• 遍历数组时直接访问item的属性，修正了错误的item[index]写法。
• 添加错误捕获，便于调试请求失败场景。

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