React Native中FlatList无法渲染数据问题（GET接口正常）

问题根源 #

1. 数据结构不匹配：接口返回的是包含vehiculos数组的对象，而非直接的数组，但你直接将整个响应对象赋值给了状态变量，FlatList的data属性要求接收数组类型。
2. 字段名称错误：你在Item组件中尝试渲染item.email和item.tipo_usuario，但接口返回的车辆数据里并没有这些字段，实际可用字段为placa、marca、modelo等。

修正后的代码 #

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

function App() {
  const [listaVehiculos, setListaVehiculos] = useState([]);

  const peticionGet = async () => {
    try {
      const response = await axios.get(
        "https://portal.tuparcero.com/apiTuparcero/vehiculos/vehiculos.php?id=40"
      );
      // 提取接口返回的数组数据
      setListaVehiculos(response.data.vehiculos || []);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    peticionGet();
    // 若无需每2秒自动刷新，可移除以下定时器代码
    const interval = setInterval(() => {
      peticionGet();
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const Item = ({ item }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>车牌号：{item.placa}</Text>
      <Text style={styles.itemText}>品牌：{item.marca}</Text>
      <Text style={styles.itemText}>型号：{item.modelo}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={listaVehiculos}
        renderItem={Item}
        keyExtractor={(item) => item.id_vehiculo.toString()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    paddingHorizontal: 10,
  },
  itemContainer: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
    marginBottom: 10,
  },
  itemText: {
    fontSize: 16,
    marginBottom: 5,
  },
});

export default App;

关键修正点 #

• 从响应数据中提取vehiculos数组赋值给状态变量，确保FlatList拿到正确的数组数据源。
• 修改Item组件渲染的字段为接口返回的实际字段，匹配数据结构。
• 调整keyExtractor使用接口返回的id_vehiculo作为唯一标识，转为字符串类型（FlatList要求key为字符串）。
• 统一使用async/await结合try/catch处理异步请求，代码更简洁易读。
• 添加基础样式，优化列表项的显示效果。

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