我是redux的新手，我正在尝试为我的第一个项目实现redux。一切看起来都很好，但当我console.log从redux存储的数据时，它首先给了我两个空数组，然后在接下来的几行数组不是空的。这导致map函数不能在我的ProductCart元素上工作。
控制台：

BikesPage.js:22 []length: 0[[Prototype]]: Array(0)
BikesPage.js:22 []length: 0[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]0: {_id: '6351a9a95814ff5815e61187', title: 'MTB', price: '500', __v: 0}1: {_id: '6351aa75f685aa64faeaf27d', category: 'bike', title: 'MTB', price: '5080', __v: 0}2: {_id: '6351aa96f685aa64faeaf27f', category: 'bike5', title: 'MTB', price: '3980', __v: 0}length: 3[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]0: {_id: '6351a9a95814ff5815e61187', title: 'MTB', price: '500', __v: 0}1: {_id: '6351aa75f685aa64faeaf27d', category: 'bike', title: 'MTB', price: '5080', __v: 0}2: {_id: '6351aa96f685aa64faeaf27f', category: 'bike5', title: 'MTB', price: '3980', __v: 0}length: 3[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]

还原剂：

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, action.payload];
    case UPDATE:
      return state.products.map((product) =>
        product._id === action.payload._id ? action.payload : product
      );
    case DELETE:
      return state.products.filter((product) => product._id !== action.payload);

    default:
      return state;
  }
};

合并异径管：

export const reducers = combineReducers({ products: productReducer });

处理措施：

export const getProducts = () => async (dispatch) => {
  try {
    const { data } = await api.fetchProducts();
    dispatch({ type: FETCH_ALL, payload: data });
  } catch (error) {
    console.log(error.message);
  }
};

自行车页面组件：

function BikesPage() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProducts());
  }, [dispatch]);

  const product = useSelector((state) => state.products);
  const { products } = product;

  console.log(products);

  return (
    <Container>
      <Row>
        <Col>
          <div className="BikesPage">
            {(products.length > 0) &
              products.map((p) => {
                return <ProductCart price={p.price} title={p.title} />;
              })}
          </div>
        </Col>
      </Row>
    </Container>
  );
}

index.js文件：

const store = createStore(reducers, compose(applyMiddleware(thunk)));

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

为了解决这个问题，我甚至在app.js中编写了useEffect函数来调度getProducts（），但它仍然不起作用