React搭配Redux Toolkit时数组map操作无法正常渲染商品数据问题

问题根源 #

你在product-slice.js的setProducts reducer里写错了状态更新逻辑：
调用dispatch(setProducts(loadedProducts))时，传入的loadedProducts本身就是已经处理完成的商品数组，但是你使用了push方法更新状态，相当于把整个商品数组作为单个元素塞进了原有的state.products数组中，最终得到的是二维数组，结构如下：

products: [
  [ {id:xxx, productName:xxx}, {id:xxx, productName:xxx}, ... ]
]

子组件遍历这个二维数组时，拿到的每一项是数组而非商品对象，自然读不到id/productName等属性，也就无法渲染出对应内容。

修复方案 #

修改product-slice.js里的setProducts reducer逻辑，直接替换数组而不是追加元素：

const productSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    setProducts(state, action) {
      // 错误写法：state.products.push(action.payload);
      // 正确写法：直接替换整个products数组
      state.products = action.payload;
    },
  },
});

可选优化 #

可以在DisplayProductsList组件中加可选链和空值兜底，避免数组为空、接口异常时出现渲染报错：

export default function DisplayProductsList(props) {
  return (
      props.products?.map((product) => (
        <DisplayProducts
        key={product.id}
        imageUrl={product.imageUrl}
        name={product.productName}
        price={product.price}
        />
      )) || null
  );
}

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas