集成Redux后产品无法显示问题求助

集成Redux后，页面上的产品不再显示。添加{products && products.map((product) => ..)}这样的空值判断后，空白页面消失，但产品仍然不显示，也没有错误提示。Redux DevTools中能看到成功返回的产品数据：

{
  type: 'PRODUCT_LIST_SUCCESS',
  payload: [
    {
      _id: 1,
      name: 'IPhone 11 Pro 256GB memory',
      image: '/images/phone.jpg',
      brand: 'Apple',
      category: 'Electronics',
      description: 'Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working',
      rating: '4.00',
      numReviews: 8,
      price: '599.99',
      countInStock: 7,
      created: '2022-11-14T18:29:17.417487Z',
      user: 1
    },
  ]
}

问题根源 #

问题出在Redux reducer的状态字段命名错误以及数据结构处理不当，具体看ProductReducers.js中的代码：

1. productListReducers初始状态定义的是products: []，但各个case里错误使用了product字段，导致组件获取的products始终为空数组
2. 成功获取数据时，错误地把已是数组的payload再包裹一层数组，让products变成二维数组，无法正常遍历渲染
3. 错误状态下没有设置error字段，反而把错误信息放到了product字段里
4. productDetailsReducers同样存在问题：成功获取单个产品时，把对象包裹成数组，导致组件访问属性时出错

修复代码 #

修复后的productListReducers #

import {
  PRODUCT_LIST_REQUEST,
  PRODUCT_LIST_SUCCESS,
  PRODUCT_LIST_FAIL,
} from "../constants/ProductConstants";

export const productListReducers = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

修复后的productDetailsReducers #

import {
  PRODUCT_DETAILS_REQUEST,
  PRODUCT_DETAILS_SUCCESS,
  PRODUCT_DETAILS_FAIL,
} from "../constants/ProductConstants";

export const productDetailsReducers = (state = { product: { reviews: [] } }, action) => {
  switch (action.type) {
    case PRODUCT_DETAILS_REQUEST:
      return { loading: true, ...state };
    case PRODUCT_DETAILS_SUCCESS:
      return { loading: false, product: action.payload };
    case PRODUCT_DETAILS_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

额外修复：ProductAction.js中的API路径错误 #

listProductDetails函数里的URL少了斜杠，会导致请求地址错误，修正如下：

export const listProductDetails = (id) => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_DETAILS_REQUEST });
    // 添加斜杠修正路径
    const { data } = await axios.get(`/api/products/${id}`);
    dispatch({
      type: PRODUCT_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: PRODUCT_DETAILS_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

内容的提问来源于stack exchange，提问作者Khaled