元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：reactjs 中未定义

Question

我一直在尝试创建一个搜索应用程序，从 api 搜索电影并在表格中显示结果。 我希望它是可排序的，所以我查看了 react-bootstrap-table 但表没有显示，而是这个大错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 所有的进出口在我看来都很好。 我该怎么做才能解决这个问题并在应用程序中显示表格？

显示错误的表格组件

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Table } from "react-bootstrap";
import { deleteMovie } from "../action/movieActions";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

const MovieTable = ({ data, deleteMovie }) => {
  console.log(data);
  return (
    <div className="col m4">
      <BootstrapTable data={data} striped hover search pagination>
        <TableHeaderColumn dataField="name" isKey dataAlign="center" hidden>
          Name
        </TableHeaderColumn>
        <TableHeaderColumn dataField="year" dataSort>
          Year
        </TableHeaderColumn>
        <TableHeaderColumn dataField="id" dataSort>
          Id
        </TableHeaderColumn>
        <TableHeaderColumn dataField="delete" valueField="id">
          <span onClick={deleteMovie(data.movieId)}>Delete Movie</span>
        </TableHeaderColumn>
      </BootstrapTable>
    </div>
  );
};

MovieTable.propTypes = {
  deleteMovie: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteMovie }
)(MovieTable);

应用程序.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMovie } from "./action/movieActions";

import Input from "./components/Input";
import MovieTable from "./components/MovieTable";

class App extends Component {
  state = {
    searchInput: "The Rain"
  };

  componentDidMount() {
    this.props.getMovieList(this.state.searchInput);
  }

  getMovie = () => {
    this.props.getMovieList(this.state.searchInput);
  };

  onChangeHandler = e => {
    this.setState({
      searchInput: e.target.value
    });
    console.log(this.state.searchInput);
  };
  render() {
    const { data, loading } = this.props.movies;

    return (
      <div className="center">
        <div>
          <h2 className="center white-text">Movie Search</h2>
        </div>

        <div className="container">
          <Input
            value={this.state.searchInput}
            onChange={this.onChangeHandler}
            onClick={this.getMovie}
          />
          <div className="row">
            {loading ? (
              <p>Loading</p>
            ) : (
              <MovieTable
                data={data.map(d => ({
                  year: d.Year,
                  name: d.Title,
                  movieId: d.imdbID
                }))}
              />
            )}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    movies: state.movies
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getMovieList: name => dispatch(fetchMovie(name))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Answer 1

从“react-bootstrap-table-next”导入 BootstrapTable；

看看https://codesandbox.io/s/jlol04qrxv?file=/src/index.js:61-117