如何解决当我刷新页面时,React Redux React Router单个产品页面数据消失
我有一个产品详细信息API,该API接收特定产品的ID和标签并返回它。当我单击读取更多按钮以推送产品ID和特性时,我设法查看了产品详细信息,但是我得到的数据很好,但是当我刷新页面时,数据却消失了:
onClick={() =>
this.props.history.push(
`/${product.slug}/${product.id}`
)
}
使用代码时,我可以看到数据,但是刷新页面时,数据消失了: 产品详细信息页面:
componentDidMount() {
let id = this.props.match.params.productID;
let slug = this.props.match.params.productSlug;
this.props.fetchProductDetails(slug,id);
MapStateToProps:
const mapStateToProps = (state) => {
return {
productDataDetails: state.product_details,};
};
地图DisaptchToProps:
const mapDispatchToProps = (dispatch) => {
return {
fetchProductDetails: (slug,id) => dispatch(fetchProductDetails(slug,id)),};
export default withRouter(
connect(mapStateToProps,mapDispatchToProps)(ProductDetail)
);
动作:
export const fetchProductDetails = (slug,id) => {
return (dispatch) => {
dispatch(fetchProductDetailsRequest());
axios
.get(productDetailsURL(slug,id))
.then((response) => {
const products_details = response.data;
dispatch(fetchProductDetailsSuccess(products_details));
})
.catch((error) => {
// error.message is the error message
dispatch(fetchProductDetailsFailure(error.message));
});
}
}
export const fetchProductDetailsSuccess = (products_details) => {
return {
type: FETCH_PRODUCTDETAILS_SUCCESS,payload: products_details,};
};
减速器:
const initialState = {
loading: false,products_details:[],error: ''
}
const reducer = (state = initialState,action) => {
switch (action.type) {
case FETCH_PRODUCTS_REQUEST:
return {
...state,loading: true
}
case FETCH_PRODUCTS_SUCCESS:
return {
loading: false,products_details: action.payload,error: ''
}
case FETCH_PRODUCTS_FAILURE:
return {
loading: false,products_details: [],error: action.payload
}
default: return state
}
}
常量网址:
export const productDetailsURL = (slug,id) =>
${endpoint}/products/${slug}/${id}/
;
API示例网址:
http://127.0.0.1:8000/api/products/product-2/2/
数据
{
"id": 2,"title": "Product 2","description": "test product 2","image": "http://127.0.0.1:8000/media/images/alphius_progress_JhGeM71.PNG","author": "Sparrowan","slug": "product-2","publish": "2020-06-20T16:16:20Z","category": "Mobile Applications","product_details": [
{
"id": 1,"detail_description": "Description for carousel 1","detail_image": "/media/images/api_email_mA76DdY.PNG","product": 2,"created_at": "2020-07-31T13:37:51Z"
}
]
}
单击更多时,数据加载良好,但是刷新页面时,数据消失。我不知道组件安装时或什么时候没有分派动作。但是我又添加了记录器,当我检查时,我只能使用数据来绑定到 productDataDetails 对象,而无法从道具中访问它。
预先感谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。