React Native中FlatList无法加载API数据显示问题求助

核心问题分析 #

• API响应结构处理错误：dummyjson返回的响应是包含products数组的对象，你直接将整个响应对象赋值给this.state.shops，但FlatList需要的是数组类型的数据源。
• App.tsx中冗余无效的fetch代码：你在App组件里写的fetch逻辑没有实际作用，shops是普通常量，无法通过异步操作更新，且ShopList组件本身已独立请求数据，这部分代码完全多余。
• keyExtractor类型不匹配：item.id是数字类型，而FlatList要求key必须是字符串，直接使用会触发警告，可能影响渲染逻辑。
• ShopListRow中多余的key属性：FlatList的renderItem返回的元素不需要手动添加key，keyExtractor已负责生成唯一标识。

修复步骤与代码修改 #

1. 修正ShopList中的API数据处理 #

修改fetchItem方法，提取响应里的products数组赋值给state：

fetchItem() {
  fetch(`https://dummyjson.com/products`, { method: 'GET' })
    .then(response => response.json())
    .then(responseJson => {
      // 正确取products数组作为数据源
      this.setState({ shops: responseJson.products })
    })
    .catch(error => {
      alert(error)
    });
}

（可以去掉包裹fetch的requestAnimationFrame，该API用于动画帧调度，此处无必要）

2. 清理App.tsx中的冗余代码 #

删除无效的shops变量和fetch逻辑，简化后：

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ShopList />
    </SafeAreaView>
  );
}

3. 修正keyExtractor的类型 #

将数字id转换为字符串：

<FlatList
  data={this.state.shops}
  renderItem={({ item, index }) => <ShopListRow shop={item} index={index} />}
  keyExtractor={item => item.id.toString()} // 转为字符串类型
  initialNumToRender={16}
  extraData={this.state}
/>

4. 移除ShopListRow中的多余key #

删除View组件上的key={shop.id}：

return (
  <View style={{ backgroundColor: index % 2 === 0 ? 'white' : '#F3F3F7' }}>
    <View style={styles.row}>
      <View >
        <Text>{shop.title}</Text>
        <Text >{shop.description}</Text>
      </View>
      <View style={styles.edges}>
        <TouchableHighlight 
          style={styles.button}
          underlayColor='#5398DC'
        >
          <Text style={styles.buttonText}>Info</Text>
        </TouchableHighlight>
      </View>
    </View>
  </View>
)

额外优化建议 #

• 添加加载状态：在数据请求过程中显示ActivityIndicator，提升用户体验
• 优化错误处理：用Toast组件替代alert，避免阻断用户操作

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