сопоставление идентификатора из ответа json с ключом и использование его для FlatList react-native

У меня есть json из ответа API, как показано ниже:

centres = [{
    id: 1,
    name: "DEF",
    },{
    id: 2,
    name: "ABC",
  }]

Теперь я хочу заполнить эти данные выше в FlatList

return(
  <View>
    <FlatList
      data={this.state.centres}
      renderItem={({item}) => <CentreComponent centre={item}/>}
    />
  </View>
);

Но я не могу сделать это выше, поскольку данные (центры) не имеют свойства «ключ».

Теперь я могу просмотреть каждый элемент в массиве и добавить свойство «ключ», которое имеет то же значение, что и идентификатор. Но я нахожу это эффективным.

Есть ли лучший способ сопоставить столбец «id» с «ключом» для отображения FlatList


node.js key react-native-flatlist
person Mateen-Hussain    schedule 11.07.2017    source источник
comment
Возможный дубликат stackoverflow.com/questions/21148419/   -  person Dominik    schedule 11.07.2017
comment
Хм не совсем так. В сообщении упоминается замена путем разбора строки, хотя это объект JSON.   -  person Mateen-Hussain    schedule 11.07.2017
comment
Правда что. Близко однако. ;)   -  person Dominik    schedule 11.07.2017

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать keyExtractor . Пожалуйста, обновите свой код как:

return(
 <View>
  <FlatList
   data={this.state.centres}
   keyExtractor={(item, index) => item.id}
   renderItem={({item}) => <CentreComponent centre={item}/>}
  />
  </View>
);
person Rohan Kangale    schedule 11.07.2017

arrow_upward
2
arrow_downward

Самый быстрый способ увидеть, как это происходит, - это перебрать массив.

const centres = [{
    id: 1,
    name: "DEF",
  },{
    id: 2,
    name: "ABC",
}];

const newCentres = centres.map( ( item ) => ({ key: item.id, name: item.name }) );

console.log( JSON.stringify( newCentres ) )
// [{"key":1,"name":""},{"key":2,"name":""}]
person Dominik    schedule 11.07.2017