如何从 React 正确地将 Id 传递给 Rest API Endpoint答案

【问题标题】：How to Pass Id correctly to Rest API Endpoint from React如何从 React 正确地将 Id 传递给 Rest API Endpoint
【发布时间】：2022-02-07 19:21:17
【问题描述】：

我正在尝试通过 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，所以需要一点帮助来解决这个问题我正在使用动作>减速器>存储>使用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;

【问题讨论】：

是的..您已经定义了具有接受 id 的参数的操作。只需要在调度函数的函数调用中传递 id。

标签： javascript reactjs django-rest-framework react-redux

【解决方案1】：

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

【讨论】：

【解决方案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 是未定义的

【讨论】：