Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined - PullRequest
Новая
       17

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined

1 голос
/ 03 апреля 2020

я пробовал базовый c пример реагирующих таблиц, и я получил эту ошибку "Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов) но получил: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и имена. " тогда как я экспортировал компонент. вот мой код 

import React, { Component } from 'react';  
import ReactTable from "react-table";  

const data = [{
    name: 'Ayaan',
    age: 26
}, {
    name: 'Ahana',
    age: 22
}, {
    name: 'Peter',
    age: 40
}, {
    name: 'Virat',
    age: 30
}, {
    name: 'Rohit',
    age: 32
}, {
    name: 'Dhoni',
    age: 37
}]

const columns = [{
    Header: 'Name',
    accessor: 'name'
}, {
    Header: 'Age',
    accessor: 'age'
}]

export default class TableTry extends Component {  
    render() {  
        return (  
            <div>  
                <ReactTable  
                    data={data}  
                    columns={columns}  

                />  
            </div>        
        )       
    }  
}

и вот детали версии: 

"react": "^16.13.1",
"react-table": "^7.0.4"

1 Ответ

0 голосов
/ 03 апреля 2020

import ReactTable from "react-table"; для версии 6 из react-table, версия 7 не поддерживается. Вы можете использовать реагировать-таблица-6 

import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
const data = [
  {
    name: "Ayaan",
    age: 26
  },
  {
    name: "Ahana",
    age: 22
  },
  {
    name: "Peter",
    age: 40
  },
  {
    name: "Virat",
    age: 30
  },
  {
    name: "Rohit",
    age: 32
  },
  {
    name: "Dhoni",
    age: 37
  }
];
const columns = [
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Age",
    accessor: "age"
  }
];

export default function App() {
  return (
    <div className="App">
      <ReactTable data={data} columns={columns} />
    </div>
  );
}

проверить здесь CodeSandBox

...