Как я могу решить уникальную ключевую проблему в React native?

Question

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

Вот данные json: http://hazir.net/api/match/today

, а вот мои коды

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class Matches extends React.Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('http://hazir.net/api/match/today')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }



  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.matchId}, {item.matchDate}</Text>}
          keyExtractor={({id}, index) => id}
        />
      </View>
    );
  }
}

Answer 1

Самым простым решением было бы обновить ваш keyExtractor, поскольку он, кажется, не работает.Не похоже, что ваши данные имеют свойство id, однако оно имеет свойство matchId.Это означает, что вы можете сделать что-то вроде следующего.

<FlatList
 ...
 keyExtractor={({matchId}, index) => matchId.toString()}
/> 

В качестве альтернативы вы можете использовать индекс в качестве ключа и сделать это

<FlatList
 ...
 keyExtractor={({matchId}, index) => index.toString()}
/>