React Native：如何使用API数据渲染FlatList组件

问题分析与修正点 #

• useEffect依赖缺失：你的useEffect没有添加依赖数组，会导致组件每次渲染都重复发起请求，需要添加空数组[]确保只在组件挂载时请求一次。
• API数据结构错误：目标API返回的实际数据在results字段中，直接把整个json赋值给places会导致FlatList无法获取有效数据。
• 变量作用域问题：状态变量places、isLoading和useEffect逻辑应该放在App组件内部，否则组件无法访问这些变量。
• 未渲染图片字段：需要添加Image组件展示imageUrl，同时处理图片加载失败的情况。
• 加载状态未处理：加载过程中应显示加载提示，提升用户体验。

完整修正代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Image, ActivityIndicator, StyleSheet, StatusBar } from 'react-native';

export default function App() {
  const placesURL = "https://www.nationaltrust.org.uk/search/data/all-places";
  const [isLoading, setLoading] = useState(true);
  const [places, setPlaces] = useState([]);

  useEffect(() => {
    fetch(placesURL)
      .then((response) => {
        // 检查响应是否成功
        if (!response.ok) {
          throw new Error('请求失败');
        }
        return response.json();
      })
      .then((json) => {
        // 提取results字段中的实际数据
        setPlaces(json.results);
      })
      .catch((error) => {
        console.error('获取数据出错:', error);
        alert('获取数据失败，请稍后重试');
      })
      .finally(() => {
        setLoading(false);
      });
  }, []); // 添加空依赖数组，确保只执行一次

  // 自定义列表项渲染
  const renderPlaceItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Image
        style={styles.placeImage}
        source={{ uri: item.imageUrl }}
        // 图片加载失败时的处理
        onError={() => console.log('图片加载失败:', item.imageUrl)}
        // 可选：添加默认占位图
        defaultSource={{ uri: 'https://via.placeholder.com/150' }}
      />
      <Text style={styles.placeTitle}>{item.title}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      {isLoading ? (
        // 加载状态显示指示器
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <FlatList
          data={places}
          renderItem={renderPlaceItem}
          keyExtractor={(item) => item.id.toString()} // 确保key为字符串类型
          contentContainerStyle={styles.listContent}
        />
      )}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    padding: 16,
  },
  listContent: {
    gap: 12,
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    padding: 8,
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 8,
  },
  placeImage: {
    width: 80,
    height: 80,
    borderRadius: 4,
  },
  placeTitle: {
    fontSize: 16,
    flex: 1,
  },
});

额外说明 #

• keyExtractor注意事项：将item.id转换为字符串，避免FlatList因key类型不匹配抛出警告。
• 图片处理：defaultSource可在图片加载失败/未完成时显示占位图；onError用于捕获加载错误，方便调试。
• 错误处理：添加响应状态检查，避免解析无效响应数据，同时通过控制台日志记录错误信息，便于排查问题。

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