如何从React将Id正确传递到Rest API端点

Question

我正试图通过Django Rest Framework的端点获取数据终点是：

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

问题是当我用id请求时，Django服务器显示以下错误：

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

这表明我无法正确传递id，所以需要littl的帮助来解决这个问题我正在使用操作>减速器>商店>使用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,
});

组件

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;

Answer 1

const id = ...并将其传递给调度功能dispatch(listCategoryDetails(id))

Answer 2

之前

// 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]);

之后

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]);

内部UseEffect你没有通过id变量，所以它的声明Id是未定义的