错误:元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)，但得到:未定义

Question

我正在尝试react表的基本示例，但我得到了这个错误错误：元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到的却是：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"

Answer 1

import ReactTable from "react-table";适用于react-table的版本6，不支持版本7。您可以使用react-table-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