警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具

Question

When i map an array with Picker item i got the following warning:

Each child in an array should have a unique "key" prop.

Here is my code

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

Answer 1

Better performance

This is a suggestions of reactjs to improve the rendering performance. By providing a unique key for each dynamically created element, it is possibile to minimize possible DOM changes.

Update your code

Use the id of each element as a unique key. Alternatively would it be possible to use the index of each element.

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

Answer 2

Even I faced the same warning message and was able to overcome it by adding a unique key to the return object like in the below code.

Code with warning message

 getBatchList() {
    return this.state.availableBatch.map((data) => {
        return (
            <RadioButton value={data.label}>
                <Text style={styles.batchText}>{data.label}</Text>
            </RadioButton>   
        )
    })
 }

Code without warning message

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

}