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 - 每个孩子都必须拥有“钥匙”道具

回答

相关问题