![](/img/trans.png)
[英]"TypeError: Cannot destructure property 'product' of 'productDetails' as it is undefined"
[英]TypeError: Cannot destructure property 'product' of 'productDetails' as it is undefined
**ProductDetailsScreen.js >>> 這是我的代碼,我從 Redux 商店獲得了產品列表,但是在初始化產品詳細信息時遇到了問題。 **
export default function ProductDetilsScreen(props) {
const dispatch = useDispatch();
const productId = props.match.params.id;
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
useEffect(() => {
dispatch(detailsProduct(productId));
}, [dispatch, productId]);
**productActions.js >> 這是我的代碼,我從 Redux 商店獲得產品列表,但在初始化產品詳細信息時遇到問題。 **
export const detailsProduct = (productId) => async (dispatch) => {
dispatch({
type: PRODUCT_DETAILS_REUEST,
payload: productId,
});
try {
const { data } = await Axios.get(`/api/products/${productId}`);
dispatch({
type: PRODUCT_DETAILS_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: PRODUCT_DETAILS_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
**productReducer.js >>> 這是我的代碼,我從 Redux 商店獲得了產品列表,但是在初始化產品詳細信息時遇到了問題。 **
export const productDetailsReducer = (
state = { product: {}, loading: true },
action
) => {
switch (action.type) {
case PRODUCT_DETAILS_REUEST:
return { loading: true };
case PRODUCT_DETAILS_SUCCESS:
return { loading: false, product: action.payload };
case PRODUCT_DETAILS_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
**Store.js >>> 這是我的代碼,我從 Redux 商店獲得產品列表,但在初始化產品詳細信息時遇到問題。 **
import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import thunk from "redux-thunk";
import { productDetailsReducer, productListReducer } from "./productReducers";
const initialState = {};
const reducer = combineReducers({
productList: productListReducer,
productDetils: productDetailsReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;
似乎這里有一個錯字,可能會導致問題。
// productDetils in Store.js file
const reducer = combineReducers({
productList: productListReducer,
productDetils: productDetailsReducer,
});
// productDetails in ProductDetailsScreen.js file
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
嘗試糾正這個粗心的錯誤。
除此之外,似乎沒有什么異常。 您對productDetails
的初始 state 形式為state = { product: {}, loading: true }
似乎是正確的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.