MERN развернут на heroku - функция приложения не работает - PullRequest
0 голосов
/ 02 ноября 2018

У меня есть приложение 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...