我按預期從 api 獲取資料，但這里的問題是我在第 3 次嘗試中獲取它，當沒有資料顯示時導致我的應用程式出錯。
我正在測驗它在控制臺上列印，但它是同樣的錯誤。一旦我重繪 我的頁面，錯誤就會在控制臺中泛濫
減速器
export const productDetailsReducer = (state = { products: {} }, action) => {
switch (action.type) {
case PRODUCT_DETAILS_REQUEST:
return {
...state,
loading: true,
};
case PRODUCT_DETAILS_SUCCESS:
return {
loading: false,
product: action.payload,
};
case PRODUCT_DETAILS_FAIL:
return {
...state,
error: action.payload,
};
case CLEAR_ERRORS:
return {
...state,
error: null,
};
default:
return state;
}
};
零件
const ProductDetails = () => {
const dispatch = useDispatch();
const alert = useAlert();
const { id } = useParams();
const { product, loading, error } = useSelector(
(state) => state.productDetails
);
useEffect(() => {
dispatch(getProductDetails(id));
if (error) {
alert.error(error);
dispatch(clearErrors());
}
}, [dispatch, id, alert, error]);
console.log(product);
行動
export const getProductDetails = (id) => async (dispatch) => {
try {
dispatch({ type: PRODUCT_DETAILS_REQUEST });
const { data } = await axios.get(`/api/v1/product/${id}`);
dispatch({
type: PRODUCT_DETAILS_SUCCESS,
payload: data.product,
});
} catch (error) {
dispatch({
type: PRODUCT_DETAILS_FAIL,
payload: error.response.data.message,
});
}
};
應用程式.js
function App() {
return (
<Router>
<div className="App">
<Header />
<div className="container container-fluid">
<Routes>
<Route path="/" element={<Home />} exact />
<Route path="/product/:id" element={<ProductDetails />} />
</Routes>
</div>
<Footer />
</div>
</Router>
);
}
uj5u.com熱心網友回復：
您尚未將加載設定為初始狀態，我認為這就是原因
export const productDetailsReducer = (state = { products: {} }, action) => {
您正在嘗試在設定狀態值之前訪問加載狀態，這就是您收到錯誤的原因您應該使用默認值在初始狀態下設定加載和錯誤
const initialState = {products: {}, loading: true, error: null}
然后將其傳遞給減速器。
export const productDetailsReducer = (state = initialState, action) => {
并將產品變成產品
希望這可以解決您的問題。
uj5u.com熱心網友回復：
我檢查了您的代碼，我認為問題出在您的初始狀態
export const productDetailsReducer = (state = { products: {} }, action) =>
state={products:{}}嘗試更改state={product: {}}請讓我知道它是否有效？
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429551.html
標籤：javascript 反应 还原