React使用Redux Toolkit存储MongoDB拉取数据后组件无法展示如何解决

问题根因 #

你的Redux slice中更新state的逻辑写错了，导致最终存储的products是二维数组，遍历渲染时自然拿不到正确的单个产品数据。
你在setProducts reducer里用了state.products.push(action.payload)，而你dispatch传的action.payload本身就是已经整理好的产品数组loadedProducts，相当于你把整个数组当成单个元素塞到了原数组里，最终结构会是[[{id:xxx, ...}, {id:yyy, ...}]]，而不是预期的[{id:xxx, ...}, {id:yyy, ...}]。
你打印的props结果也能验证这一点：props.products是一个长度为1的数组，第一个元素才是真正的产品列表数组。

修复方案 #

修改productSlice里的setProducts reducer逻辑，两种写法可按需选择：

写法1：直接替换整个数组（当前场景推荐） #

你是首次拉取全量产品数据，直接覆盖原有空数组即可：

const productSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    setProducts(state, action) {
      state.products = action.payload;
    },
  },
});

写法2：展开数组追加元素 #

如果后续有增量拉取追加产品的需求，用这个写法：

const productSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    setProducts(state, action) {
      state.products.push(...action.payload);
    },
  },
});

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