Question

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

ng-include

当我渲染它以创建表格时，它就可以正常工作。

结果是这样的：

代码如下：

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
        }]
    },
];

但是当我添加新数据以消耗dummyData时

 <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>

发生了一个错误..并非按日期显示，而是在侧面创建了一个像新单元格一样的..

这是怎么了？也许以前问过，但是我找不到我想要的东西。

Here is the codesandbox I made

Answer 1

这正是代码的工作方式。

您在<td />中写入项目的时间为31 expend。尝试使用dummyData

渲染expend = []

这是具有固定逻辑和固定键https://codesandbox.io/s/88k5ynyqy9

的代码

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

1 个答案: