javascript - 元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:在 reactjs 中未定义
问题描述
我一直在尝试创建一个搜索应用程序,从 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);
应用程序.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);
解决方案
从“react-bootstrap-table-next”导入 BootstrapTable;
看看 https://codesandbox.io/s/jlol04qrxv?file=/src/index.js:61-117
推荐阅读
- android - Android 热点 - Mac 地址过滤
- javascript - 在 Node 中导入的 SyntaxError
- java - 使用布尔值验证密码
- npm - 无法登录 Verdaccio
- buefy - Buefy b-table headers 无法识别 CSS 样式
- javascript - 从 node.js shell 和文件运行时,Javascript 代码输出不同
- three.js - Sprite 放大时变大,缩小时变小
- ionic-framework - 有什么方法可以从离子打字稿更改 android:windowSoftInputMode 值
- vba - 有没有办法使用 VBA 从 Outlook 配置文件中删除额外的邮箱?
- powershell - 当文件夹为 yyyy 时停止递归