React Native Flatlist - 每個孩子都必須擁有「鑰匙」道具

我有幾個簡單的FlatLists，每個顯示部門和商店的自定義列表項。我得到的錯誤是每個孩子都應該有一個獨特的「鑰匙」道具，但我已經定義了keyExtractor以及試圖將key道具添加到自定義列表行組件。即React Native Flatlist - 每個孩子都必須擁有「鑰匙」道具

<FlatList 
    style={_styles.list} 
    data={this.props.divisions} 
    extraData={this.state.chosenDivisionId} 
    keyExtractor={this._keyExtractor} 
    renderItem={this._renderDivisionItem}/>} 
/> 

_keyExtractor = (item, index) => item.id 

_renderDivisionItem = ({ item, index }) => { 
    let typedItem: DivisionData = item; 
    return (
     <ShopListItem 
     text={typedItem.name} 
     selected={this.state.chosenDivisionId === typedItem.id} 
     itemId={typedItem.id} 
     key={typedItem.id} /* Have tried with and without this */ 
     onPress={itemId => this._updateStateForDivisionChosen(itemId)} 
     /> 
    ); 
    };

我怎麼仍然得到警告，我做錯了什麼？ keyExtractor方法在我的其他FlatLists上正常工作。，當然，所用的ID都是唯一的

來源

2017-08-01 jhm

的設置看起來是正確的，我能想到的唯一的事情可能會拋出這個錯誤是，如果不在該數組中的每個對象有一個item.id –

我發現這個問題。

該應用程序正在使用redux進行狀態管理，並且所討論的列表以初始狀態初始化。模型已將id的屬性名稱從divisionId和shopId更改爲普通id這兩個列表 - 但我忘記在初始狀態對象中更改此屬性。因此，當數據到達之前呈現的列表中，密鑰提取器無法找到該項目上的id道具，因爲它們被稱爲divisionId或shopId。當數據到達時，狀態將被重寫，並且鍵將填充得很好。

感謝您的答案，我希望這能失策幫助別人在未來:-)

來源

2017-08-02 10:44:41 jhm

嘗試改變這條線與此

_keyExtractor = (item, index) => typedItem.id

來源

2017-08-01 13:15:34

謝謝，但這沒有意義:)傳遞的對象被稱爲'項目'，並使用typedItem與空指針崩潰。它只是用於呈現intellisense – jhm

React Native Flatlist - 每個孩子都必須擁有「鑰匙」道具

回答

相關問題