arrays - 如何在反应中的对象中渲染数组内的对象？

Question

我正在尝试渲染下面的数据以做出反应。

        const fakeData = {
            201907: {
                15: [{
                    yearMonthKey: '201907',
                    dayKey: '15',
                    startDate: '2019-07-15 00:00:00+0900',
                    title: 'testProgrma',
                    time: '04:29 ~ 04:29',
                    imageUrl: [faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false)], 
                    firstCome: 10
                },
                {
                    yearMonthKey: '201907',
                    dayKey: '15',
                    startDate: '2019-07-15 00:00:00+0900',
                    title: 'testProgrma123132',
                    time: '04:29 ~ 04:29',
                    imageUrl: [faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false)], 
                    firstCome: 10
                }],
                16: [{
                        yearMonthKey: '201907',
                        dayKey: '16',
                        startDate: '2019-07-15 00:00:00+0900',
                        title: 'testProgrma',
                        time: '04:29 ~ 04:29',
                        imageUrl: [faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false)], 
                        firstCome: 10
                    }]
            },
                201908: {
                    17: [{
                        yearMonthKey: '201908',
                        dayKey: '17',
                        startDate: '2019-08-15 00:00:00+0900',
                        title: 'testProgrma',
                        time: '04:29 ~ 04:29',
                        imageUrl: [faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false), faker.image.imageUrl(612, 477, undefined, true, false)], 
                        firstCome: 10
                    }]
                }
        }

fakeData 包含两个大数组（201907, 201908），每个对象，其他对象嵌套在里面（15,16,17）。并且每个嵌套对象都将数组作为值。

但问题就在这里。

组件必须呈现如下。

201907
  ㅣ
   - 15
     ㅣ
      - title:'testProgrma',
      - title:'testProgrma123132'
   - 16
     ㅣ
      - title: 'testProgrma'
201908
  ㅣ
   - 17
     ㅣ
      - title: 'testProgrma'

它嵌套很深，还根据 yearMonthKey 和 dayKey 绑定它们。

标签： arraysreactjsobject

Answer 1

React 不会让对象渲染。因此，在循环之前尝试构建数组。

    let newArray = []

    for(let j in fakeData){
       for(let i in j){
       newArray.push(i)
    }
    }

console.log(newArray)

然后用 .map() 渲染 newArray