无法在此.props.history.push()读取未定义的道具

Question

我在我的项目中使用Axios进行POST API，所以在我从服务器收到响应后，我想通过导航到其他页面

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

但我总是收到TypeError: Cannot read property 'props' of undefined的错误

这是我的代码

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;

我注意到一个问题，如果我使用fetch而不是Axios，那么我就不会出现这个错误，我如何使用Axios而不是fetch来实现这一点？

如果我使用fetch，下面是代码：

let formData = new FormData();
formData.append("id", item._id);
fetch("https://webquickfix.com/controlcenter/get_banner_insight", {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((responsejson) => {
console.log(responsejson);
if (responsejson.status === 200) {
this.props.history.push("/*****");
}
});

Answer 1

您使用function作为回调，而不是箭头函数，因此上下文不会是react组件的上下文。在then中使用箭头功能，如下所示-

.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("/*****");
}
})

Answer 2

试试这个：

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("/*****");
}
});