React问题：无法通过useReducer传递Products和Cart数组

核心问题 #

1. 上下文未正确包裹组件：你的App.js中没有用Context（Cart的Provider）包裹使用CartState的组件，导致CartState获取的是上下文默认值，无法拿到正确状态。
2. useReducer初始状态不会自动更新：useReducer的初始值仅在组件首次挂载时生效，后续通过useEffect获取到产品数据后，不会自动同步到reducer的状态中。

步骤1：修复App.js的组件层级 #

确保Context包裹所有需要访问Cart状态的子组件，修改App.js：

import React from 'react';
import Router from './routes';
import GlobalStyle from './assets/styles/globalStyles';
import ScrollToTop from './components/ScrollToTop';
import { BrowserRouter } from 'react-router-dom';
import { ContentProvider } from './useContext';
import Context from './contexts/Context';
import { CartState } from './contexts/Context';

function App() {
  const { state } = CartState();

  console.log(state);
  return (
    <BrowserRouter>
      <Context>
        <ContentProvider>
          <GlobalStyle />
          <Router />
          <ScrollToTop />
        </ContentProvider>
      </Context>
    </BrowserRouter>
  );
}

export default App;

步骤2：更新Reducer支持产品数据同步 #

在Reducer.js中添加用于更新产品列表的action类型：

export const cartReducer = (state, action) => {
  switch (action.type) {
    case 'SET_PRODUCTS':
      return {
        ...state,
        products: action.payload
      };
    default:
      return state;
  }
};

步骤3：修改Context.js同步异步数据 #

去掉多余的useState，直接在useEffect获取数据后通过dispatch更新reducer状态：

import { createContext, useEffect, useReducer, useContext } from 'react';
import { cartReducer } from './Reducers';
import { ApiServer } from '../services/Api/index'

const Cart = createContext();

const Context = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, {
    products: [],
    cart: [],
  });

  useEffect(() => {
    ApiServer.get('/products/')
      .then(response => {
        if (response.data != null) {
          dispatch({ type: 'SET_PRODUCTS', payload: response.data });
        } else {
          console.log('数组为空')
        }
      })
      .catch(error => {
        console.log(error);
      });
  }, [dispatch]);

  return <Cart.Provider value={{ state, dispatch }}> {children}</Cart.Provider>;
}

export default Context

export const CartState = () => {
  return useContext(Cart);
};

说明 #

• 现在App.js中的state会在API请求完成后自动更新为包含13条产品的数组。
• 若需保留独立的useState管理产品数据，可添加监听products变化的useEffect，在其中触发dispatch同步到reducer。

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