循环渲染Google图表

Question

我要渲染多个图表。这是我用于渲染的组件

export default class ChartComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []};
    }

    componentWillReceiveProps(nextProps) {
        const data = [this.props.data];
        const {col} = nextProps;
        console.log(col);
        for (const id in col[0]) {
            data.push([id, ...col.map(arr => arr[id])]);
        }
        console.log(data);
        this.setState({data: data})
    }


    render() {
        return (
            <Chart
                chartType="ColumnChart"
                loader={<div>Loading Chart</div>}
                data={this.state.data}
                options={{
                    title: this.props.title,
                    hAxis: {
                        title: 'Powtorzenia',
                        minValue: 0,
                    },
                    vAxis: {
                        title: 'Transakcje',
                    },
                }}
                legendToggle
            />
        );
    }

此代码采用两个数组，并将它们合并以供<Chart/>组件使用。这就是我现在拥有的：

这有效。它正确显示了数字。

这是我父组件的相关代码：

{/*This works (See the image attached)*/}
<ChartComponent
    title={`Wszystkie doladowania`}
    col={[this.state.allTransactions, this.state.completedTransactions]}
    data={['Transactions', 'Started', 'Completed']}
/>
{/*This doesn't work*/}
<div>
    {
        this.state.allTransactions.map((tr, i) => {
            const col = [
                [this.state.allTransactions[i]],
                [this.state.completedTransactions[i]]
            ];

            console.log(2, col);
            return (
                <ChartComponent
                    key={i}
                    title={`Wszystkie doladowania`}
                    col={col}
                    data={['Transactions', 'Started', 'Completed']}
                />
            )
        })
    }
</div>

变量是这样的：     var allTransactions =         [             空值，             519，             91，             25岁             2，             1，             3，             2，             0，             0，             0，             1，             1，             1个         ]     var completeTransactions =         [             空值，             120             36岁             3，             1，             2，             1，             1个         ]

var col =
    [
        [
            null,
            519,
            91,
            25,
            2,
            1,
            3,
            2,
            0,
            0,
            0,
            1,
            1,
            1
        ],
        [
            null,
            120,
            36,
            3,
            1,
            2,
            1,
            1
        ]
    ]

因此，我基本上想为合并集合中的每个值绘制一个图表。像这样：

但是对于每个数字。所以要把图表分开。

我得到的唯一错误是：

  

表没有列。

13次。

有什么想法吗？