Невозможно прочитать свойство 'slice' из неопределенного с ReactTable

Question

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

Это код, который у меня есть в настоящее время.

import ReactTable from 'react-table'
import 'react-table/react-table.css'

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }]

const VariableTable = ({ readOnly, correct, incorrect, active, variables, steps, create, update, onActiveChange }) => console.log(data) || (
  <div className="VariableTable card">

/* Some other HTML and JSX in here */

    <ReactTable data={data} columns={columns}/>
  </div>
)

Это в основном демонстрация, которую они предоставляют здесь: https://www.npmjs.com/package/react-table#columns

Она также прекрасно компилируется.

Должен ли я изменять какие-либо другие файлы в проекте React?

Спасибо.

Answer 1

Я думаю, что, может быть, вы что-то упустили, я создал Песочница для вас

Надеюсь, это поможет