Есть ли способ исправить «Предупреждение: у каждого ребенка в списке должен быть уникальный« ключ »?

Question

Есть ли способ исправить это предупреждение?

Предупреждение: у каждого ребенка в списке должен быть уникальный ключ "

Я получал это предупреждение каждый раз и Не понимаю, как это исправить. Я пытаюсь это исправить, но я понимаю, что что-то не так на моем пути. Надеюсь понять, что не так, потому что это так раздражает.

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

Надеюсь, что вы понимаете мою проблему и Как я могу это исправить. Приведенный выше пример кода показывает мою попытку получить некоторые данные из API, но он возвращает предупреждение каждый раз, когда каждый дочерний элемент в списке должен иметь уникальный «ключ».

Answer 1

console.log ключ каждого элемента. Возможно, у вас одинаковый идентификатор для некоторых предметов?