Как отобразить объекты в состоянии в динамический список c в reactJS

Question

Насколько мне известно сейчас, я знаю, что вы можете отображать массив из состояния в HTML элементов и можете создавать массив элементов, которые могут повторяться снова и снова. Однако могу ли я сделать то же самое, но отобразить элементы в списке, чтобы я мог динамически заполнять свой словарь?

Итак, я хочу, чтобы это было:

this.setState({         
    series: [
    {
        name: 'Bob',
        data: [
        {
            x: 'Block 396 HDB Tampines',
            y: [
            new Date('2019-03-05').getTime(),
            new Date('2019-03-08').getTime()
            ]
        },
        {
            x: 'Eastpoint Mall',
            y: [
            new Date('2019-03-02').getTime(),
            new Date('2019-03-05').getTime()
            ]
        },
        {
            x: 'Bata',
            y: [
            new Date('2019-03-05').getTime(),
            new Date('2019-03-07').getTime()
            ]
        },
        {
            x: 'Barracuda Tech',
            y: [
            new Date('2019-03-03').getTime(),
            new Date('2019-03-09').getTime()
            ]
        },
        {
            x: 'Aromas of India',
            y: [
            new Date('2019-03-08').getTime(),
            new Date('2019-03-11').getTime()
            ]
        },
        {
            x: '517 Food court',
            y: [
            new Date('2019-03-11').getTime(),
            new Date('2019-03-16').getTime()
            ]
        },
        ]
    },
    {
        name: 'Joe',
        data: [
        {
            x: 'Aljunied Industrial Estate',
            y: [
            new Date('2019-03-02').getTime(),
            new Date('2019-03-05').getTime()
            ]
        },
        {
            x: 'Bata',
            y: [
            new Date('2019-03-06').getTime(),
            new Date('2019-03-16').getTime()
            ]
        },
        {
            x: 'YinJi Singapore',
            y: [
            new Date('2019-03-03').getTime(),
            new Date('2019-03-07').getTime()
            ]
        },
        {
            x: 'Aromas of India',
            y: [
            new Date('2019-03-20').getTime(),
            new Date('2019-03-22').getTime()
            ]
        },
        {
            x: 'Djitsun Mall',
            y: [
            new Date('2019-03-10').getTime(),
            new Date('2019-03-16').getTime()
            ]
        }
        ]
    },
    ],
})

Выше то, что я хочу получить в качестве окончательного результата

Ниже приведен код, который я пробовал, но это кажется невозможным

this.setState({
            series: [
                ...this.state.suspectCases.map(suspect => {
                    return{
                        name: suspect.firstName + " " + suspect.lastName,
                        data:[
                            {
                                x: 'Block 396 HDB Tampines',
                                y: [
                                new Date('2019-03-05').getTime(),
                                new Date('2019-03-08').getTime()
                                ]
                            },
                            {
                                x: 'Eastpoint Mall',
                                y: [
                                new Date('2019-03-02').getTime(),
                                new Date('2019-03-05').getTime()
                                ]
                            },
                            {
                                x: 'Bata',
                                y: [
                                new Date('2019-03-05').getTime(),
                                new Date('2019-03-07').getTime()
                                ]
                            },
                            {
                                x: 'Barracuda Tech',
                                y: [
                                new Date('2019-03-03').getTime(),
                                new Date('2019-03-09').getTime()
                                ]
                            },
                            {
                                x: 'Aromas of India',
                                y: [
                                new Date('2019-03-08').getTime(),
                                new Date('2019-03-11').getTime()
                                ]
                            },
                            {
                                x: '517 Food court',
                                y: [
                                new Date('2019-03-11').getTime(),
                                new Date('2019-03-16').getTime()
                                ]
                            },
                        ]
                    }
                    
                })            
            ]
        })

Есть какие-нибудь способы сделать это? Или это невозможно и для этого требуются другие серверы? PS: Я ничего не делал с данными, так как все еще пытался проверить, работает ли имя сначала

Answer 1

Попробуйте заполнить массив перед установкой состояния, например

let series = []
this.state.suspectCases.foreach(suspect => {
    series.push(
        {
            name: suspect.firstName + " " + suspect.lastName,
            data:[
                {
                    x: 'Block 396 HDB Tampines',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                    ]
                },
                {
                    x: 'Eastpoint Mall',
                    y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Bata',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Barracuda Tech',
                    y: [
                    new Date('2019-03-03').getTime(),
                    new Date('2019-03-09').getTime()
                    ]
                },
                {
                    x: 'Aromas of India',
                    y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-11').getTime()
                    ]
                },
                {
                    x: '517 Food court',
                    y: [
                    new Date('2019-03-11').getTime(),
                    new Date('2019-03-16').getTime()
                    ]
                },
            ]
        }
    )
}) 

this.setState({series})

OR

let series = this.state.suspectCases.map(suspect => {
    return(
        {
            name: suspect.firstName + " " + suspect.lastName,
            data:[
                {
                    x: 'Block 396 HDB Tampines',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                    ]
                },
                {
                    x: 'Eastpoint Mall',
                    y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Bata',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Barracuda Tech',
                    y: [
                    new Date('2019-03-03').getTime(),
                    new Date('2019-03-09').getTime()
                    ]
                },
                {
                    x: 'Aromas of India',
                    y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-11').getTime()
                    ]
                },
                {
                    x: '517 Food court',
                    y: [
                    new Date('2019-03-11').getTime(),
                    new Date('2019-03-16').getTime()
                    ]
                },
            ]
        }
    )
}) 

this.setState({series})