我有MERN应用,并且已将其部署在heroku上。构建和部署没有错误或问题。应用程序已启动,我可以注册并登录。但是问题是登录或注册后,您被重定向到显示民意测验的/home
组件。 在我的开发环境中,一切正常。但是在heroku上部署之后就不是了。问题是组件没有加载,控制台错误是
TypeError: n.map is not a function
at t.value (Polls.jsx:23)
at ci (react-dom.production.min.js:3418)
at ui (react-dom.production.min.js:3409)
at mi (react-dom.production.min.js:3593)
at qi (react-dom.production.min.js:4600)
at $i (react-dom.production.min.js:4620)
at Aa (react-dom.production.min.js:5017)
at Da (react-dom.production.min.js:4983)
at Ma (react-dom.production.min.js:4927)
at Qi (react-dom.production.min.js:4847)
wi @ react-dom.production.min.js:3843
polls.js:29
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
at polls.js:29
at w (runtime.js:63)
at Generator._invoke (runtime.js:282)
at Generator.t.(anonymous function) [as next] (https://floating-island-91400.herokuapp.com/static/js/1.3d3fa28b.chunk.js:1:218826)
at r (asyncToGenerator.js:3)
at s (asyncToGenerator.js:25)
因此,如果我转到Polls.jsx第23行,则是说poll.map不是从redux进行轮询的函数,因此我假设未获取此数据。
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { getPolls, getUserPolls, getCurrentPoll } from "../store/actions";
class Polls extends Component {
constructor(props) {
super(props);
this.handleSelect = this.handleSelect.bind(this);
}
componentDidMount() {
const { getPolls } = this.props;
getPolls();
}
handleSelect(id) {
const { history } = this.props;
history.push(`/poll/${id}`);
}
render() {
const { polls, auth, getPolls, getUserPolls } = this.props;
**//this line is saying that polls.map is not a function**
const allPolls = polls.map(poll => (
<li
className="single-poll"
onClick={() => this.handleSelect(poll._id)}
key={poll._id}
>
{poll.question}
</li>
));
return (
<Fragment>
{auth.isAuthenticated ? (
<div>
<button className="polls-btn" onClick={getPolls}>
All Polls
</button>
<button className="polls-btn" onClick={getUserPolls}>
My Polls
</button>
<ul className="polls">{allPolls}</ul>
</div>
) : null}
</Fragment>
);
}
}
const mapStateToProps = state => ({
auth: state.auth,
polls: state.polls
});
export default connect(
mapStateToProps,
{
getPolls,
getUserPolls,
getCurrentPoll
}
)(Polls);
polls.js是指
export const getPolls = () => {
return async dispatch => {
try {
const polls = await api.call('get', 'poll')
dispatch(setPolls(polls))
dispatch(removeError())
} catch (err) {
const
error = err.response.data;
dispatch(addError(error.message));
}
}
}