映射ID並將其用於FlatList反應天然

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> 
); 

但我不能做以上的數據（中心）沒有「關鍵」財產。

現在我可以遍歷數組中的每個項目並添加一個屬性「key」，它具有與ID相同的值。但我認爲這是有效的。

是否有更好的方法來映射「ID」欄爲「關鍵」，以使FlatList

Answer 1

嘗試使用keyExtractor。請更新您的代碼：

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

Answer 2

的fastes方法可以讓我看到這樣的情況是通過遍歷數組了。

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":""}]