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

произошла ошибка .. она не отображается на дату, а создается как новая ячейка сбоку ..

что здесь не так? Может быть, он спрашивает раньше, но я не могу найти то, что я ищу.

Вот коды, которые я сделал

Answer 1

Именно так должен работать ваш код.

Вы пишете 31 <td /> s количество времени, которое количество элементов в expend составляет.Попробуйте выполнить рендеринг dummyData с expend = []

Вот код с фиксированной логикой и фиксированными ключами https://codesandbox.io/s/88k5ynyqy9