Redux获取Store数据存在延迟，组件map函数无法正常工作求助

问题分析 #

1. 控制台两次空数组的原因：你开启了React严格模式（<React.StrictMode>），开发环境下它会重复执行组件render、useEffect等生命周期，所以dispatch(getProducts())会被调用两次，加上store初始值是空数组，因此控制台先输出两次空数组——这是开发环境的正常行为，生产环境不会出现。

2. 组件map失效的核心问题：BikesPage组件里的条件判断用了按位与&而非逻辑与&&。(products.length > 0) & products.map(...)会被解析为按位运算，即使数组为空也会执行map，导致渲染异常。

3. Reducer结构错误：productReducer中CREATE、UPDATE、DELETE三个case返回的结构和初始state（{products: []}对象）不符，比如CREATE直接返回数组[state.products, action.payload]，会彻底破坏store结构，后续取数据必然出问题。

解决方案 #

1. 修复组件条件判断 #

把BikesPage里的&改成&&，同时加上React列表渲染必需的key属性：

{(products.length > 0) &&
  products.map((p) => {
    return <ProductCart key={p._id} price={p.price} title={p.title} />;
  })}

甚至可以简化写法（空数组map不会渲染任何内容，无需额外判断长度）：

{products.map((p) => (
  <ProductCart key={p._id} price={p.price} title={p.title} />
))}

2. 修复Reducer结构错误 #

确保所有case都返回和初始state一致的对象结构：

const initialState = {
  products: [],
};

export const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ALL:
      return { ...state, products: [...action.payload] };
    case CREATE:
      return { ...state, products: [...state.products, action.payload] };
    case UPDATE:
      return {
        ...state,
        products: state.products.map((product) =>
          product._id === action.payload._id ? action.payload : product
        ),
      };
    case DELETE:
      return {
        ...state,
        products: state.products.filter((product) => product._id !== action.payload),
      };
    default:
      return state;
  }
};

3. 关于严格模式的重复渲染（可选） #

如果不想看到开发环境的两次空数组输出，可以暂时移除<React.StrictMode>，但建议保留——它能帮你提前发现潜在bug，生产环境会自动关闭该模式。

验证效果 #

修复后，开发环境控制台仍会先输出两次空数组，但组件会在products有数据时正常渲染ProductCart，map功能恢复正常。

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