有一种方法可以解决“警告：列表中的每个孩子都应该有一个唯一的“密钥”？

Question

Is there a way to fix this warning?

Warning: Each child in a list should have a unique "key

I got this warning every time and don't understand how to fix it. I try to fix it but i realize that something wrong in my way . hope to understand whats wrong because its so annoying.

import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, Platform, FlatList, Dimensions, Image } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'
import HeaderButton from '../components/HeaderButton';
import axios from 'axios';


const { width, height } = Dimensions.get('window');

export default class PlacesListScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { isLoading: true, data: [] };
    }

    componentDidMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data,
                })
                console.log(res.data);
            })
    }

    renderItem(item) {
        const { title, artist } = item.item;
        return (
            <View style={styles.itemView}>
                <View style={styles.imgContainer}>
                    {/* <Image style={styles.imageStyle}
                        source={{ uri: image }}
                    /> */}
                </View>

                <View style={styles.itemInfo}>
                    <Text style={styles.name}>
                        {title+ ' ' + artist}
                    </Text>
                    <Text style={styles.vertical} numberOfLines={1}>{title} |</Text>
                </View>
            </View>
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, padding: 20 }}>
                    <Text style={{ alignSelf: 'center', fontWeight: 'bold', fontSize: 20 }}>loading...</Text>
                    <ActivityIndicator />
                </View>
            )
        }


        return (
                <View style={styles.container}>
                    <FlatList
                        data={this.state.data}
                        renderItem={this.renderItem.bind(this)}
                        keyExtractor={item => item.id}
                    />
                </View>
            );
        }
    }

Hope that you understand my problem and how can I fix it. the example code above shows my try to get some data from API, but it returns a warning every time about each child in a list should have a unique "key".

Answer 1

console.log the key of each item. It may be possible u have the same id for some items?