Сетка реагирующих данных, не может прочитать свойство 'карта' из неопределенного

Question

Я пытаюсь создать таблицу данных с сеткой реагирующих данных с моими собственными данными.Сначала я попытался воссоздать пример начала работы и получил ошибку

"TypeError: Cannot read property 'map' of undefined" at  
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.

Я все правильно установил, я не уверен, почему это происходит, когда я буквально просто следую учебному пособию.

Сначала все началось с моих собственных данных, затем я использовал те же самые точные данные из примера, и они все еще имеют ту же ошибку.

Использование учебника по этой ссылке: https://adazzle.github.io/react-data-grid/docs/quick-start

render(){
const columns = [
    { key: 'id', name: 'ID' },
    { key: 'title', name: 'Title' },
    { key: 'count', name: 'Count' } ];

const data = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1', 
    count: 40}, {id: 2, title: 'row1', count: 60}];

 return (
    <div>
      <ReactDataGrid>
        columns={columns}
        rowGetter={i => data[i]}
        rowsCount={3}
        minHeight={150}
      </ReactDataGrid>

    </div>
  );
}

Answer 1

Ваша проблема в том, что вы закрываете тег, прежде чем пытаться передать реквизит.aka

 <ReactDataGrid>
 ^-------------^
open         close

Это означает, что реквизиты в экосистеме React будут рассматриваться как «дочерние элементы» (все, что находится между компонентными тегами, считается дочерним, я немного удивлен, что это компилируется, отчасти поэтому янравится использовать машинописный текст для получения предупреждений о проблемах синтаксиса, подобных этому).

В React способ передачи свойств заключается в самом теге перед его закрытием.

<ReactDataGrid prop1={something}>
---------------^-----------------
               ^ prop on component before closing tag

Чтобы исправить текущую реализациюпросто измените его на следующее:)

<ReactDataGrid
  columns={columns}
  rowGetter={i => data[i]}
  rowsCount={3}
  minHeight={150}
/>

См. рабочий пример здесь