У меня есть приложение MERN, и я развернул его на heroku. Построить и развернуть без ошибок или проблем. Приложение работает, и я могу зарегистрироваться и войти в систему. Но проблема в том, что после входа или регистрации вы перенаправлены на /home
компоненты, которые отображают опросы. В моей среде разработки все работает нормально. Но после развертывания на героку это не . И проблема в том, что компонент не загружается, а ошибка консоли -
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)
поэтому, если я перейду к строке 23 Опросы.jsx, это говорит о том, что poll.map не является функцией, в которой опрос приходит из избыточного числа, поэтому я предполагаю, что эти данные не извлекаются.
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));
}
}
}
![enter image description here](https://i.stack.imgur.com/JfkYJ.png)