Javascript 此时无法读取未定义的道具。props.history.push（）

我在我的项目中使用Axios for POST API，所以在我从服务器获得响应后，我想通过

this.props.history.push('/****')

但我总是得到TypeError的错误：无法读取未定义的属性“props”

这是我的密码

class Banner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToLogin: false,
      logout: false,
      loading: true,
    };
  }

   
  viewInsight = (item) => {
    let res;
    axios
      .post("https://webquickfix.com/controlcenter/get_banner_insight", {
        id: item._id,
      })
      .then(function(response) {
        console.log(response.status);
        console.log(response.data.data)
        localStorage.setItem(
          "bannerInsight",
          JSON.stringify(response.data.data)
        );

        if (response.status == 200) {
          this.props.history.push("/*****");
        }
      })
      .catch(function(error) {
        console.log(error);
        
      });

    
  };

  render() {

    return (
      <Container fluid className="main-content-container px-4">
        <div noGutters className="page-header py-4 contactUs">
          <PageTitle sm="4" title="Banners" className="text-sm-left" />
          <Button theme="danger" onClick={() => this.logout()}>
            Logout
          </Button>
        </div>

        <Row>
          <Col>
            <Card small className="mb-4">
              <CardHeader className="border-bottom">
                {" "}
                <h6 className="m-0">
                  All Banners{" "}
                  <button
                    title="Add Banner"
                    onClick={() =>
                      this.props.history.push("/controlcenter/add-banner")
                    }
                    className="btn ml-3 btn-primary"
                  >
                    <i className="fa fa-plus"></i>
                  </button>
                </h6>
              </CardHeader>
              <CardBody className="p-0 pb-3">
                <table className="table mb-0">
                  <thead className="bg-light">
                    <tr>
                      <th scope="col" className="border-0">
                        #
                      </th>
                      <th scope="col" className="border-0">
                        Banner Link
                      </th>
                      <th scope="col" className="border-0">
                        Webinar
                      </th>
                      <th scope="col" className="border-0">
                        Page
                      </th>
                      <th scope="col" className="border-0">
                        Insights
                      </th>
                      {/* <th scope="col" className="border-0">
                        Actions
                      </th> */}
                    </tr>
                  </thead>
                  <tbody>
                    {this.state.banners.map((item, index) => {
                      return (
                        <tr>
                          <td>{index + 1}</td>
                          <td>
                            <img src={item.image} style={{ width: 200 }} />
                          </td>
                          <td>
                            {item.isWebinar
                              ? this.props.webinars.filter(
                                  (webinar) => webinar._id == item.webinar_id
                                )[0].title
                              : ""}
                          </td>
                          <td>{item.page}</td>
                          <td
                            className="insightsBanner"
                            onClick={() => this.viewInsight(item)}
                          >
                            View Insights
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default Banner;

您使用的是回调函数，而不是箭头函数，因此上下文不会是react组件的上下文。使用箭头功能，然后像这样-

.then((response) => {
    console.log(response.status);
    console.log(response.data.data)
    localStorage.setItem(
      "bannerInsight",
      JSON.stringify(response.data.data)
    );

    if (response.status == 200) {
      this.props.history.push("/*****");
    }
  })

试试这个：

const options = {
    url: 'https://webquickfix.com/controlcenter/get_banner_insight',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    data: {
        id: item._id
    }
}

axios(options)
   .then((response) => response.json())
   .then((responsejson) => {
       console.log(responsejson);
       if (responsejson.status === 200) {
           this.props.history.push("/*****");
       }
});

---

问题不在于Axios和fetch，而在于arrow和vanilla函数；后者对此有自己的看法。@jonrsharpe是的，谢谢你的评论！！

const options = {
    url: 'https://webquickfix.com/controlcenter/get_banner_insight',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    data: {
        id: item._id
    }
}

axios(options)
   .then((response) => response.json())
   .then((responsejson) => {
       console.log(responsejson);
       if (responsejson.status === 200) {
           this.props.history.push("/*****");
       }
});