node.js - 将 id 从 json 响应映射到键并将其用于 FlatList react-native

Question

我有一个来自 api 响应的 json，如下所示：

centres = [{
    id: 1,
    name: "DEF",
    },{
    id: 2,
    name: "ABC",
  }]

现在我想在 FlatList 中填充上述数据

return(
  <View>
    <FlatList
      data={this.state.centres}
      renderItem={({item}) => <CentreComponent centre={item}/>}
    />
  </View>
);

但我不能这样做，因为数据（中心）没有“关键”属性。

现在我可以遍历数组中的每个项目并添加一个与 ID 具有相同值的属性“键”。但我发现这很有效。

有没有更好的方法将“id”列映射到“key”以呈现 FlatList

Answer 1

我可以看到这种情况发生的最快方法是遍历数组。

const centres = [{
    id: 1,
    name: "DEF",
  },{
    id: 2,
    name: "ABC",
}];

const newCentres = centres.map( ( item ) => ({ key: item.id, name: item.name }) );

console.log( JSON.stringify( newCentres ) )
// [{"key":1,"name":""},{"key":2,"name":""}]

Answer 2

尝试使用keyExtractor。请将您的代码更新为：

return(
 <View>
  <FlatList
   data={this.state.centres}
   keyExtractor={(item, index) => item.id}
   renderItem={({item}) => <CentreComponent centre={item}/>}
  />
  </View>
);