Я получаю сообщение об ошибке Превышен максимальный стек вызовов при динамическом рендеринге столбцов таблицы с использованием библиотеки react-table (v6)
, ниже приведены мои структуры данных
Объект dcs
{
"13": {
"id": "13",
"name": "xyz",
},
"14": {
"id": "14",
"name": "xyz 1",
},
"15": {
"id": "15",
"name": "xyz 2",
},
"16": {
"id": "16",
"name": "xyz 3",
}
}
Массив items
[
{
"id": "72",
"name": "Vegetable Basket A",
"codename": "100666",
"stocks": {
"13": {
"currentStockCount": 1000,
"holdStockCount": 0,
"id": "24",
"offerStockCount": 2000
},
"14": {
"currentStockCount": 1000,
"holdStockCount": 0,
"id": "27",
"offerStockCount": 2000
},
"15": {
"currentStockCount": 1000,
"holdStockCount": 0,
"id": "26",
"offerStockCount": 2500
},
"16": {
"currentStockCount": 1000,
"holdStockCount": 0,
"id": "25",
"offerStockCount": 1500
}
}
}
... 9 more items
]
И вот как они в конечном итоге отображаются
const DC_COLUMNS = useMemo(() => {
return Object.values(dcs).map((dc) => {
return {
width: 200,
Header: dc?.name,
// Basically only access the stock for the particular dc
// This is the trouble line, the issue fades away after I remove dc.id
accessor: `stocks.${dc.id}`,
Cell({ value }) {
const cs = value?.currentStockCount ?? 0;
const hs = value?.holdStockCount ?? 0;
const os = value?.offerStockCount ?? 0;
return <StockRange cs={cs} hs={hs} os={os} />;
},
};
});
}, [dcs]);
<CustomReactTable
pageSize={10}
leftAlign
loading={loading}
data={items}
columns={DC_COLUMNS}
/>
Шаги для воспроизведения (обязательно) 1. Имейте список как минимум из 10 строк 2. Генерация столбцов динамически как минимум 4
Снимки экрана
Я использую react-table@6.11.5