错误：元素类型无效：预期是一个字符串（对于内置组件）或一个类函数（...）。元素类型无效：预期是一个字符串(对于内置组件)或一个classfunction (...) 检查`Carlist`的渲染方法。

Question

我正在关注一本关于Spring+React全栈开发的书。我是一个完全的新手，我按照书中提供的代码去做，但是我得到了标题中提供的一个错误。我知道这可能与导入有关，但我很困惑，问题可能出在哪里。

App.js

import React from 'react';
import './App.css';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Carlist from './components/Carlist';

function App() {
  return (
    <div className="App">
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            CarList
          </Typography>
        </Toolbar>
      </AppBar>
      <Carlist></Carlist>
    </div>
  );
}

export default App;

Carlist.js

import React, { Component } from 'react';
import {SERVER_URL} from '../constants.js'
import ReactTable from "react-table";

class Carlist extends Component {
  constructor(props) {
    super(props);
    this.state = { cars: []};
  }

  componentDidMount() {
    fetch(SERVER_URL + 'api/cars')
    .then((response) => response.json()) 
    .then((responseData) => { 
      this.setState({ 
        cars: responseData._embedded.cars,
      }); 
    })
    .catch(err => console.error(err)); 
  }


  render() {
    const columns = [{
      Header: 'Brand',
      accessor: 'brand'
     }, {
      Header: 'Model',
      accessor: 'model',
    }, {
      Header: 'Color',
      accessor: 'color',
    }, {
      Header: 'Year',
      accessor: 'year',
    }, {
      Header: 'Price €',
      accessor: 'price',
    },]

    return (
      <div className="App">
        <ReactTable data={this.state.cars} columns={columns} 
          filterable={true}/>
      </div>
    );
  }
}

export default Carlist;

Answer 1

我设法找到了问题所在。对于任何想知道的人来说，在react-table中渲染表格的方式在第7版中发生了重大变化。解决的办法是降级到第6版或者按照第7版的文档调整代码。

对比一下:V7的实现。https:/github.comtannerlinsleyreact-tableblobmasterexamplesbasicsrcApp.js。V6的实现。https:/www.npmjs.compackagereact-table-v6#example