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.的所有导入和导出对我来说都很好。我该怎么做才能解决此问题并在应用程序中显示表格？

显示错误的表组件

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);

App.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

元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：在reactjs

1 个答案: