How to Pass Id correctly to Rest API Endpoint from React-CodePudding

I'm trying to fetch data through endpoint from Django Rest Framework endpoint is :

/api/v1/categories/nested/{id}/

Problem is when I'm requesting with id, Django server show this error :

ValueError: Field 'id' expected a number but got 'undefined'.
[07/Feb/2022 15:53:01] "GET /api/v1/categories/nested/undefined/ HTTP/1.1" 500 162581

As this suggest I'm unable to Pass id correctly, So need littl help to fix that I'm using actions > reducer > store > component approach using react redux action.js

export const listCategoryDetails = (id) => async (dispatch) => {
    try {
      dispatch({ type: CATEGORY_DETAIL_REQUEST });
  
      const { data } = await axios.get(`/api/v1/categories/nested/${id}`); // Purpose to show nested brands[]
  
      dispatch({
        type: CATEGORY_DETAIL_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: CATEGORY_DETAIL_FAIL,
        payload:
          error.response && error.response.data.detail
            ? error.response.data.detail
            : error.message,
      });
    }
  };

reducer.js

export const categoryDetailsReducer = (
    state = { category: {  } },
    action
  ) => {
    switch (action.type) {
      case CATEGORY_DETAIL_REQUEST:
        return { loading: true, ...state };
  
      case CATEGORY_DETAIL_SUCCESS:
        return { loading: false, category: action.payload };
  
      case CATEGORY_DETAIL_FAIL:
        return { loading: false, error: action.payload };
  
      default:
        return state;
    }
  };

store.js

const reducer = combineReducers({
  categoryDetail: categoryDetailsReducer,
});

component

function CategoryDetail({ match, history }) {
    // const { id } = useParams();
    // console.log(id);
    const dispatch = useDispatch();
    const categoryList = useSelector((state) => state.categoryList);
    const { loading, error, categories , page, pages} = categoryList;

    useEffect(() => {
        
        dispatch(listCategoryDetails());
    }, [dispatch, match]);

  return <div>
  
                {categories.map(category => (
                <Col key={category.id} sm={12} md={8} lg={4} xl={3} >
                  
                    <h1><strong>{category.title}</strong></h1>))}


</div>;
}

export default CategoryDetail;

CodePudding user response：

const id = ... and pass it to dispatch function dispatch(listCategoryDetails(id))

CodePudding user response：

Before

// const { id } = useParams();
// console.log(id);
const dispatch = useDispatch();
const categoryList = useSelector((state) => state.categoryList);
const { loading, error, categories , page, pages} = categoryList;

useEffect(() => {
    
    dispatch(listCategoryDetails());
}, [dispatch, match]);

After

const { id } = useParams();
console.log(id);
const dispatch = useDispatch();
const categoryList = useSelector((state) => state.categoryList);
const { loading, error, categories , page, pages} = categoryList;

useEffect(() => {
    
    dispatch(listCategoryDetails(id));
}, [dispatch, match]);

Inside UseEffect You Are Not Passing id Variable So its Saying Id Is Undefined