Показать все данные из вложенного массива объектов в React Native - PullRequest
Новая
       42

Показать все данные из вложенного массива объектов в React Native

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

Это мои данные в состоянии childData: {} 

Object {
  "11-5-2019": Object {
    "18:32": Object {
      "color": "Brown",
      "time": "18:32",
    },
    "18:33": Object {
      "color": "Red",
      "time": "18:33",
    },
  },
}

Я хочу показать все эти данные на одной странице.Я пытался использовать карту, но она дает мне ошибку.Также я попробовал FlatList. 

{this.childData.map(item, index =>
<View key={index}>
    <Text>{item}</Text>
</View>
)}

Но я не знаю, как получить все данные.Я хочу, чтобы такие данные были в тексте: 

11-05-2019
  18:32
    brown
    18:32
  18:33
    red
    18:33

1 Ответ

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

Проблема в том, что .map и FlatList ожидают массив.Вы передаете объект.Итак, сначала вам нужно сделать так, чтобы вы передавали массив.

Вы можете сделать это, используя lodash :

Установите lodash с помощью: 

npm i --save lodash

, а затем используйте его с: 

var _ = require('lodash');

Теперь мы можем преобразовать ваши данные в функции рендеринга: 

render() {
   //get all keys, we pass them later 
   const keys = Object.keys(YOUR_DATA_OBJECTS);
   //here we are using lodah to create an array from all the objects
   const newData = _.values(YOUR_DATA_OBJECTS);
    return (
      <View style={styles.container}>
       <FlatList
        data={newData}
        renderItem={({item, index}) => this.renderItem(item, keys[index])}
       />
      </View>
    );
  }

И теперь у нас есть две вспомогательные функции рендеринга: 

  renderSmallItems(item){
    console.log('small item', item);
    // iterate over objects, create a new View and return the result
    const arr = _.map(item, function(value, key) {
    return (
        <View key={key}>
          <Text> Color:  {value.color} </Text>
          <Text> Time:  {value.time} </Text>
        </View>
    );
  });
     return arr; 
  }
  renderItem(item, key) {
    return(
      <View style={{marginBottom: 15}}>
      <Text> Key: {key} </Text>
      {this.renderSmallItems(item)}
      </View>
    );
  }

Вывод:

demo image

Рабочая демонстрация:

https://snack.expo.io/HyBSpYr2E

...