[英]How can i solve uniqe key prop problem in React native
I have React Native project and when i try to build my phone, i'm getting this error message. 我有React Native项目,当我尝试构建手机时,出现此错误消息。 Warning: Each child in an array or iterator should have a unique "key" prop.
警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 But it works on computer emulator.
但是它可以在计算机模拟器上运行。
Here is json data: http://hazir.net/api/match/today 这是json数据: http : //hazir.net/api/match/today
and here is my codes, 这是我的代码,
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class Matches extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('http://hazir.net/api/match/today')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.matchId}, {item.matchDate}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}
The easiest solution would be to update your keyExtractor as it appears to not be working. 最简单的解决方案是更新keyExtractor,因为它似乎不起作用。 It doesn't look like your data has an
id
property, however it does have a matchId
property. 它看起来不像您的数据具有
id
属性,但确实具有matchId
属性。 This means you could do something like the following. 这意味着您可以执行以下操作。
<FlatList
...
keyExtractor={({matchId}, index) => matchId.toString()}
/>
Alternatively you could use the index as the key and do this 或者,您可以使用索引作为关键字并执行此操作
<FlatList
...
keyExtractor={({matchId}, index) => index.toString()}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.