Блог

Я пытаюсь создать веб-сайт магазина электронной коммерции и использую redux для хранения состояний моего проекта , для простого тестирования в начале я создал локальный api в своей внутренней папке , я успешно получил список данных о продукте для домашней страницы, но когда я пытаюсь получить доступ к одному продукту на одной странице, это выдает мне ошибку 404 из состояния api (продукт не найден)!!адрес api определенно правильный, и я попытался напрямую связаться с этим адресом в postman и получил данные по идентификатору, но не могу получить доступ к этому URL-адресу в интерфейсе…!

вот мои действия по вызову api gt;gt;gt;

 import {  PRODUCT_DETAILS_START,  PRODUCT_DETAILS_SUCCESS,  PRODUCT_DETAILS_FAIL,  } from "ActionConsts";  import axios from "axios";   export const getSingleProduct = (productId) =gt; async (dispatch) =gt; {  dispatch({  type: PRODUCT_DETAILS_START,  payload: productId,  });  try {  const { data } = await axios.get(`api/products/${productId}`);  dispatch({  type: PRODUCT_DETAILS_SUCCESS,  payload: data,  });  } catch (err) {  dispatch({  type: PRODUCT_DETAILS_FAIL,  payload:  err.response amp;amp; err.response.data.message  ? err.response.data.message  : err.message,  });  } };  

это мой редуктор gt;gt;gt;

 export const productDetailReducer = (  state = { product: {}, loading: true },  action  ) =gt; {  switch (action.type) {  case PRODUCT_DETAILS_START:  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;  }  };  

this is my store gt;gt;

 import { createStore, compose, applyMiddleware, combineReducers } from "redux"; import thunk from "redux-thunk"; import { productReducer, productDetailReducer } from "Reducers";  const inState = {}; const reducer = combineReducers({  productList: productReducer,  productDetails: productDetailReducer, }); const composeEnhancers =  (typeof window !== "undefined" amp;amp;  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||  compose;  const store = createStore(  reducer,  inState,  composeEnhancers(applyMiddleware(thunk)) );  export default store;  

and here is the single page for gating data gt;gt;

 import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { SingelAll } from "Components"; import { useParams } from "react-router-dom"; import { getSingleProduct } from "Actions";  export const Single = (props) =gt; {  const { id } = useParams();  const dispatch = useDispatch();  const productId = id;  const productDetails = useSelector((state) =gt; state.productDetails);  const { loading, error, product } = productDetails;   useEffect(() =gt; {  dispatch(getSingleProduct(productId));  }, [dispatch, productId]);   console.log(product);   return (  lt;gt;  lt;SingelAll loading={loading} error={error} product={product} /gt;  lt;/gt;  ); };  

Это не найденная ошибка gt;gt;gt;

В чем моя ошибка?

Вы указываете URL-адрес api относительно текущего URL-адреса страницы:

 ... const { data } = await axios.get(`api/products/${productId}`); ...  // the api url will change depending on the url of the current page  // http://localhost:3000 -gt; http://localhost:3000/api/products/${productId} // http://localhost:3000/product -gt; http://localhost:3000/product/api/products/${productId} // http://localhost:3000/about -gt; http://localhost:3000/about/api/products/${productId} // ...etc  

Просто добавьте начальную косую черту для адреса api. Это гарантирует, что путь является абсолютным к корневому каталогу, а не к текущему каталогу

 ... const { data } = await axios.get(`/api/products/${productId}`); ...