当我使用Picker项目映射数组时,我收到了以下警告:
数组中的每个子节点都应该有一个唯一的“键”支柱。
这是我的代码
var locationArray = [{"name":"canada","id":"2"},{"name":"sweden","id":"3"}];
var Locations = locationArray.map(function(result) {
return <Picker.Item label={result.name} value={result.id} /> ;
});
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
<View style={styles.container}>
<Picker selectedValue={this.state.location} onValueChange={(location) => this.setState({location:location})} style={[styles.picker, {color: '#2E3740'}]}>
{Locations}
</Picker>
</View>
</ScrollView>
);
答案 0 :(得分:12)
这是reactjs的建议,以提高渲染性能。 对于每个动态创建的元素,providing a unique key可以最小化可能的DOM更改。
使用每个元素的id作为唯一键。或者,可以使用每个元素的索引。
var locationArray = [{"name":"canada","id":"2"},{"name":"sweden","id":"3"}];
var Locations = locationArray.map(function(result) {
return <Picker.Item key={result.id} label={result.name} value={result.id} /> ;
});
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
<View style={styles.container}>
<Picker selectedValue={this.state.location} onValueChange={(location) => this.setState({location:location})} style={[styles.picker, {color: '#2E3740'}]}>
{Locations}
</Picker>
</View>
</ScrollView>
);
答案 1 :(得分:1)
即使我遇到了相同的警告信息,并且能够通过向返回对象添加唯一键来克服它,如下面的代码所示。
带警告信息的代码
getBatchList() {
return this.state.availableBatch.map((data) => {
return (
<RadioButton value={data.label}>
<Text style={styles.batchText}>{data.label}</Text>
</RadioButton>
)
})
}
没有警告信息的代码
getBatchList() {
//LIKE THIS
var keyId=1;
return this.state.availableBatch.map((data) => {
return (
<RadioButton value={data.label} key={keyId}>
<Text style={styles.batchText}>{data.label}</Text>
</RadioButton>
)
keyId = keyId+1;
})
}