（ReactJS）循环嵌套数组以创建表数据时出错

Question

我被困在这里了。 我有如下数据：

const dummyData= [
    {
        brand: 'volcom',
        first_stock_amount: 100,
        total_income: 20,
        total_expend: 5,
        final_stock_amount: 7,
        expend: [{
            out_date: 1,
            out_amount:2,
        }]
    },
     {
        brand: 'billabong',
         first_stock_amount: 300,
         total_income: 10,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 2,
            out_amount:3
        }]
    },
     {
       brand: 'ripcurl',
         first_stock_amount: 200,
         total_income: 5,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 3,
            out_amount:4
        }]
    },
];

当我渲染它来创建表时，它工作得很好。

结果是这样的：

代码如下：

 <Table size="sm" hover responsive bordered>
                        <thead>
                        <tr>
                            <th rowSpan={2}>NO</th>
                            <th rowSpan={2}>BRAND</th>
                            <th rowSpan={2}>FIRST STOCK AMOUNT</th>
                            <th rowSpan={2}>TOTAL INCOME</th>
                            <th colSpan={31}>EXPEND</th>
                            <th rowSpan={2}>TOTAL EXPEND</th>
                            <th rowSpan={2}>FINAL STOCK AMOUNT</th>
                        </tr>
                        {this.createTableDate()}
                        </thead>
                        <tbody>
                        {dummyData.map((row, index) => {
                            return (
                                <tr key={`row-${index}`}>
                                    <td>
                                        {index + 1}
                                    </td>
                                    <td>{row.brand}</td>
                                    <td>{row.first_stock_amount}</td>
                                    <td />
                                    {row.expend.map(childRow => {
                                        return (
                                            this.state.daysInMonth.map((a, i) => {
                                                if (a == childRow.out_date) {
                                                    return <td key={`row-child-${a}`}>
                                                        {childRow.out_amount}
                                                    </td>
                                                } else {
                                                    return <td key={`row-child-${a}`}>
                                                        0
                                                    </td>
                                                }
                                            })

                                        )
                                    })}
                                    <td></td>
                                    <td></td>
                                </tr>
                            );
                        })}
                        </tbody>
                    </Table>

但是当我在 dummyData 中添加新数据时

dummyData= [
    {
        brand: 'volcom',
        first_stock_amount: 100,
        total_income: 20,
        total_expend: 5,
        final_stock_amount: 7,
        expend: [{
            out_date: 1,
            out_amount:2,
        },
{
            out_date: 2,
            out_amount:3,
        }]
    },
     {
        brand: 'billabong',
         first_stock_amount: 300,
         total_income: 10,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 2,
            out_amount:3
        }]
    },
     {
       brand: 'ripcurl',
         first_stock_amount: 200,
         total_income: 5,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 3,
            out_amount:4
        }]
    },
];

发生了一个错误。它不是按日期呈现的，而是像旁边的一个新单元格一样创建。

这里有什么问题？ 也许它以前问过，但我找不到我要找的东西。

Here is the codesandbox I made

Answer 1

这正是您的代码应该如何工作的。

你写 31 <td />s 的时间是 expend 中的项目数。尝试用expend = [] 渲染dummyData

这里是固定逻辑和固定键的代码https://codesandbox.io/s/88k5ynyqy9