Рендеринг React-таблицы [v7] с помощью сборника рассказов

Question

Я пытаюсь отобразить компонент таблицы реакции в Storybook https://storybook.js.org/

Error: Uncaught TypeError: Cannot read property 'map' of undefined
at decorateColumnTree (vendors~main.4c20d65610ba8d62ac56.bundle.js:210768)
at vendors~main.4c20d65610ba8d62ac56.bundle.js:211338
at mountMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:186644)
at Object.useMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:186866)
at Object.useMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:217699)
at useTable (vendors~main.4c20d65610ba8d62ac56.bundle.js:211337)
at Table (main.4c20d65610ba8d62ac56.bundle.js:17507)
at renderWithHooks (vendors~main.4c20d65610ba8d62ac56.bundle.js:186083)
at mountIndeterminateComponent (vendors~main.4c20d65610ba8d62ac56.bundle.js:188317)
at beginWork$1 (vendors~main.4c20d65610ba8d62ac56.bundle.js:189461)

Из-за виновника ошибки кажется, что decorateColumnTree получает неопределенное значение для аргумент столбцов. https://github.com/tannerlinsley/react-table/blob/1d8ffb18f7afc862db5d4f1da5cfc6781ed10553/src/hooks/useTable.js#L166 -L169

storybook version: ^5.1.9

react-table version: ^7.0.0-rf.15

Answer 1

Хорошо, через некоторое время я понял это. В основном это была проблема с данными и переменной областью видимости.

Изначально я делал это

import dummyData from './mockData'

table.addDecorator(withKnobs).add('Table', () =>
  React.createElement(() => {
    return (
      <Table
        columns={dummyData.columns}
        data={dummyData.data}
      />
    )
  })
)

, однако dummyData не было определено в React.createElement, поэтому я решил сделать:

table.addDecorator(withKnobs).add('NextTable', () =>
  React.createElement(() => {
    return (
      <MockTableComponent />
    )
  })
)

где фиктивные данные и фиктивные столбцы запоминаются в MockTableComponent, который отображает <Table />