React Native Как передать список с объектами, содержащими список, для работы с FlatList? - PullRequest
Новая
       9

React Native Как передать список с объектами, содержащими список, для работы с FlatList?

0 голосов
/ 07 мая 2019

Я пытаюсь создать FlatList, который содержит массив с объектами, у которых есть массив, и я не могу заставить его работать.

мое сообщение об ошибке:

«Нарушение инварианта: объект недопустим как дочерний элемент React (найдено: объект с ключами {DATA, MESSAGE, STATUS}). Если вы хотели сделать коллекция детей использует вместо этого массив «

но я могу заставить его работать с обычным списком вроде [1,2,3,4]

вот мой код: 

import React, { Component } from 'react';
import {StyleSheet, View, Text, StatusBar, TouchableOpacity, FlatList, ActivityIndicator } from 'react-native';
class FilterScreen extends Component {
state = {
  data: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}],
}
renderRow = ({item}) => {
 return (
    <View style={styles.item}>
      <Text>{item.DATA.filter_name}</Text> // my error points to this line
    </View>
    )
 }
 render() { 
  return (
   <View style={styles.MainContainer}>
     <FlatList 
       data={this.state.data}
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />
   </View>
  );
 }
}
const styles = StyleSheet.create({
 MainContainer: {
  marginTop:50,
 },

});
export default FilterScreen;

Я хочу, чтобы мой FlatList распечатал имя_фильтра, как это

фильтр 1
фильтр 2
фильтр 3
фильтр 4
фильтр 5

1 Ответ

2 голосов
/ 07 мая 2019

Вы должны быть осторожны с тем, как структурированы ваши данные. Ваш this.state.data является массивом. Внутри вашего массива у вас есть два объекта. A DATA и MESSAGE объект. Поэтому, если вы хотите передать объект DATA в renderItem, вам нужно передать this.state.data[0].DATA, как здесь: 

 <View style={styles.container}>
       <FlatList 
       data={this.state.data[0].DATA}
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />
 </View>

Затем вам нужно адаптировать вашу функцию renderItem для: 

 //remove the comment inside return, otherwise you will get again an error 
 renderRow = ({item}) => {
 return (
    <View style={styles.item}>
      <Text>{item.filter_name}</Text>
    </View>
    )

Рабочий пример: https://snack.expo.io/BkmD4V12V

...