React Native FlatList报相同key`221`警告 接口返回数据无法渲染求助

问题原因&修复方案 #

你代码里共有5处影响渲染和触发警告的问题，逐一修改即可正常展示：

1. 初始状态类型错误
   state里的resourcedata初始值设为了空字符串，但FlatList的data属性要求必须传入数组，首次渲染时会导致异常，需要修改初始值为空数组。
2. renderItem无返回值
   你在renderItem的箭头函数里用了花括号包裹逻辑，但没有写return返回要渲染的<Text>组件，导致列表项始终为空，要么去掉花括号用隐式返回，要么加return声明。
3. 缺少keyExtractor配置
   触发重复key警告的原因是你没有给FlatList配置keyExtractor，框架默认会取item.id作为key，但你的接口返回数据里存在id重复的项，需要自定义key生成规则保证唯一性。
4. 布局样式错误
   SafeAreaView设置了flexDirection:"row"，会让按钮和FlatList挤在同一行，宽度不足时FlatList会直接被挤出可视区域，需要改成默认的垂直布局。
5. 组件嵌套冲突
   FlatList放在TouchableOpacity内部会导致点击列表项时误触发拉取数据的事件，需要把FlatList移到TouchableOpacity外面。

修改后的核心代码片段 #

// 1. 修改初始state
constructor(props) {
  super(props)
  this.state = {
    resourcedata:[], // 空数组替换空字符串
    loading: false // 你用到了loading状态但未声明，补上
  };
  this.resourceAllocationList = this.resourceAllocationList.bind(this);       
}

// 2. 优化资源拉取方法，去掉冗余的JSON转换逻辑
resourceAllocationList() {
  this.setState({loading: true}) // 拉取前开启loading
  fetch('https://api.idepoz.com/ncl/api/getResource', {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then((response) => response.json())
  .then((responseJson) => {
    if(responseJson?.data) {
      // response.json()返回结果已经是JS数组，不需要来回转JSON
      this.setState({resourcedata: responseJson.data, loading: false});
    }
  }).catch((error) => {
    console.error(error);
    this.setState({loading: false})
  });
}

// 3. 修改渲染部分的布局和列表配置
<SafeAreaView style={{ 
  marginTop: 20, 
  marginHorizontal: 20,
}}>
  <TouchableOpacity onPress={this.resourceAllocationList}>
    <Text>Press Here</Text>
  </TouchableOpacity>
  {/* FlatList移到按钮外部，添加keyExtractor配置 */}
  <FlatList 
    data={this.state.resourcedata}
    keyExtractor={(item, index) => `${item.id}_${index}`} // 用id+索引保证key全局唯一
    renderItem={({ item }) => <Text>{ item.id } - {item.date} - {item.status}</Text>} // 隐式返回渲染内容
    ListHeaderComponent={getHeader}
    ListFooterComponent={getFooter}
  />
</SafeAreaView>

内容的提问来源于stack exchange，提问作者Suvra.D