时间戳

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

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

问题描述

我正在关注一本关于 Spring + React 的全栈开发的书。我是一个完全的新手，我遵循了一本书中提供的代码，但我得到了标题中提供的错误。我知道这可能与进口有关，但我不知道问题出在哪里。

应用程序.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;

标签： reactjsimportcomponents

解决方案

我设法找到了问题。对于任何想知道的人来说，在 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-表-v6#example

推荐阅读