阵营母语：无法修复FlatList键警告

我试图呈现从JSON获取从API一个FlatList，但我不断收到此错误：阵营母语：无法修复FlatList键警告

Warning: Each child in an array or iterator should have a unique "key" prop. 
Check the render method of `VirtualizedList`.

相关代码：

<FlatList 
    data={this.props.tunes} 
    keyExtractor={(item, index) => item.id} 
    renderItem={({item}) => { 
    <Item 
     key={item.id} 
     title={item.title} 
     composer={item.composer} 
     year={item.year} 
    /> 
    }} 
/>

我相信这有一个简单的解决方法，但在尝试不同的事情几天后，我还没有找到它。谢谢你的帮助！

来源

2017-08-29 Thomas

你确定item.id是不同的每个项目？并确保数据中没有重复的项目。 – bennygenel

也许这是我困惑的地方。 json中没有item.id，但我想可能React会在这种情况下提供它。在将数据提供给FlatList之前，我是否必须将json映射到每个项目上并添加一个id？ – Thomas

你需要自己创建密钥。你可以像'item.name + index'那样做一些事情，或者对每个项目可以是独一无二的，并且不会改变 – bennygenel

看起来你需要改变key到id您在keyExtractor写item.id，并确保你有ID，它是为每个组件不同：

<FlatList 
    data={this.props.tunes} 
    keyExtractor={(item, index) => item.id} 
    renderItem={({item}) => { 
    <Item 
     id={item.id} //instead of key 
     title={item.title} 
     composer={item.composer} 
     year={item.year} 
    /> 
    }} 
/>

或者，如果你不具备的独特键使用keyExtractor={(item, index) => index}

来源

2017-08-29 20:52:09 Andrew

感谢您在keyExtractor中的item.id –

阵营母语：无法修复FlatList键警告

回答

相关问题