无法读取未定义React的属性'push'

时间:2018-10-31 21:48:27

标签: javascript reactjs

在删除民意调查后,我试图推送/重定向到/home。但我得到Cannot read property 'push' of undefined

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { vote, deletePoll } from "../store/actions/polls";
import { Pie } from "react-chartjs-2";

class Poll extends Component {
  constructor(props) {
    super(props);
    this.handlePollDelete = this.handlePollDelete.bind(this);
  }
  handlePollDelete() {
    const { deletePoll, id, history } = this.props;
    deletePoll(id);
    history.push("/home");
  }

  render() {
    const { poll, vote, auth } = this.props;
    console.log(auth.user.id);
    const userIdPoll = poll.user && poll.user._id;
    const userIdAuth = auth.user.id;
    const answers =
      poll.question &&
      poll.options.map(option => (
        <button
          className="vote-btn"
          onClick={() => vote(poll._id, { answer: option.title })}
          key={option._id}
        >
          {option.title}
        </button>
      ));

    const data = poll.options && {
      labels: poll.options.map(option => option.title),
      datasets: [
        {
          label: poll.question,
          backgroundColor: poll.options.map(option => color()),
          borderColor: "#323643",
          data: poll.options.map(option => option.votes)
        }
      ]
    };

    return (
      <div className="flex-basic-column" style={{ margin: "35px 0 0 0" }}>
        <h3>{poll.question}</h3>
        {answers}
        {userIdAuth === userIdPoll ? (
          <button
            className="vote-btn delete-btn"
            onClick={this.handlePollDelete}
          >
            delete
          </button>
        ) : null}

        {poll.options && <Pie data={data} />}
      </div>
    );
  }
}

export default connect(
  state => ({
    poll: state.currentPoll,
    auth: state.auth
  }),
  { vote, deletePoll }
)(Poll);

1 个答案:

答案 0 :(得分:0)

您想在连接的组件上使用withRouter HOC,以便为组件提供history道具。

import { withRouter } from 'react-router-dom';

export default withRouter(connect(
  state => ({
    poll: state.currentPoll,
    auth: state.auth
  }),
  { vote, deletePoll }
)(Poll));