【问题标题】：Warning: Each Child in an Array or Iterator Should Have a Unique “Key” Prop警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具
【发布时间】：2016-03-12 19:28:56
【问题描述】：

当我使用 Picker 项映射数组时，我收到以下警告：

数组中的每个孩子都应该有一个唯一的“key”属性。

这是我的代码

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>
);

【问题讨论】：

在哪里？我的意思是代码在哪里？
请附上代码并定义您想要实现的目标以及您在哪里遇到此异常。
如果我没记错的话，这个错误消息实际上包含一个指向描述如何修复它的页面的链接......不过，这可能只是基于 Web 的 React 版本。 fb.me/react-warning-keys
请（重新）使用tour，环顾四周，并通读help center，尤其是How do I ask a good question? 如果你继续发questions received poorly，最终你将不会可以再发问题了。
警告有什么不清楚的地方？它表示缺少某些内容，因此您可能应该添加缺少的内容。

标签： javascript react-native

【解决方案1】：

更好的性能

这是 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>
);

【讨论】：

【解决方案2】：

即使我遇到了相同的警告消息，也能够通过向返回对象添加唯一键来克服它，如下面的代码所示。

带有警告信息的代码

 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;
    })

}

【讨论】：