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

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

arrays reactjs react-native

Arrays 在React Native中显示嵌套对象数组中的所有数据,arrays,reactjs,react-native,arraylist,multidimensional-array,Arrays,Reactjs,React Native,Arraylist,Multidimensional Array,这是我的数据，状态为childData:{} Object { "11-5-2019": Object { "18:32": Object { "color": "Brown", "time": "18:32", }, "18:33": Object { "color": "Red", "time": "18:33", }, }, } 我想在一页上显示所有这些数据。我试图使用地图，但它给了我一个错误。我也试

这是我的数据，状态为childData:{}

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

我想在一页上显示所有这些数据。我试图使用地图，但它给了我一个错误。我也试过一个平面列表

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

问题是

.map

和

FlatList

需要一个数组。您正在传递一个对象。因此，首先需要确定您正在传递一个数组

您可以使用以下方法进行此操作：

使用以下设备安装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>
    );
  }

render（）{
//拿到所有的钥匙，我们过会儿再传
const keys=Object.keys（您的\u数据\u对象）；
//这里我们使用lodah从所有对象创建一个数组
const newData=u.values（您的_数据\u对象）；
返回(
this.renderItem（项，键[索引]）
/>
);
}

现在我们有两个辅助渲染函数：

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

renderSmallItems（项目）{
console.log（'小项目'，项目）；
//迭代对象，创建新视图并返回结果
常量arr=\映射（项、函数（值、键）{
返回(
颜色：{value.Color}
时间：{value.Time}
);
});
返回arr；
}
renderItem（项，键）{
返回(
键：{Key}
{this.renderSmallItems（item）}
);
}

输出：

工作演示：

问题是

.map

和

平面列表