已将MERN部署到heroku-应用程序功能不起作用

时间:2018-11-01 22:24:19

标签: reactjs heroku

我有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));
    }
}

}

enter image description here

0 个答案:

没有答案