在React Native中显示嵌套对象数组中的所有数据

Question

这是我的数据，状态为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

Answer 1

问题是.map和FlatList期望一个数组。您正在传递一个对象。因此，首先您需要确保传递数组。

您可以使用lodash：

使用以下命令安装lodash：

npm i --save lodash

，然后将其用于：

var _ = require('lodash');

现在我们可以在render函数中转换您的数据：

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

输出：

工作演示：

https://snack.expo.io/HyBSpYr2E