错误：元素类型无效：需要字符串（对于内置组件）或类/函数（...）检查“Carlist”的渲染方法答案

【问题标题】：Error: Element type is invalid: expected a string (for built-in components) or a class/function (...) Check the render method of `Carlist`错误：元素类型无效：需要字符串（对于内置组件）或类/函数（...）检查“Carlist”的渲染方法
【发布时间】：2020-08-16 08:58:01
【问题描述】：

我正在关注一本关于 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;

【问题讨论】：

就在this.setState之前，你能用console.log(responseData)记录响应吗
我试过这样做，但无论出于何种原因，代码似乎都没有达到这一点。我还想注意，在我尝试添加反应表之前，该示例运行良好。它适用于常规的 html 表。此外，API 通过 Postman 响应没有问题。

标签： reactjs import components

【解决方案1】：

我设法找到了问题。对于任何想知道的人，react-table 中呈现表格的方式在版本 7 中发生了显着变化。解决方案是降级到版本 6 或按照版本 7 中的文档调整代码。

比较： V7 实现：https://github.com/tannerlinsley/react-table/blob/master/examples/basic/src/App.js V6 实现：https://www.npmjs.com/package/react-table-v6#example

【讨论】：