useReducer钩子初始化时无法传递数组数据，子组件products初始化为空数组问题求助

我明白你遇到的困扰了——明明控制台里data能正常打印出正确的数组，但子组件通过Context拿到的state.products却是空数组。其实这个问题的根源在于useReducer的初始state只会在组件第一次渲染时初始化一次，而你的数据是通过异步请求获取的，第一次渲染时data还没拿到，导致useReducer的初始products是空的，后续数据回来后也不会自动更新。

下面给你两种可行的解决方案，你可以根据自己的需求选择：

方案一：通过dispatch更新products（推荐） #

这种方式不需要等待数据加载完成再渲染组件，而是在数据获取到后主动通知reducer更新state，符合useReducer的设计逻辑：

1. 先把useReducer的初始state设置为默认的空数组：

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

2. 添加一个监听data变化的useEffect，当数据回来后dispatch一个初始化action：

useEffect(() => {
  // 确保data存在再更新
  if (data) {
    dispatch({ type: 'INIT_PRODUCTS', payload: data });
  }
}, [data]);

3. 在你的cartReducer里添加对应的action处理逻辑：

export function cartReducer(state, action) {
  switch(action.type) {
    case 'INIT_PRODUCTS':
      // 复制原state并更新products
      return { ...state, products: action.payload };
    // 保留你原来的其他case逻辑
    default:
      return state;
  }
}

这样当异步请求完成，data更新后，就会自动触发dispatch，把正确的数组数据更新到state里，子组件就能拿到完整的数据了。

方案二：等待数据加载完成后再初始化useReducer #

如果你可以接受在数据加载完成前展示加载状态，那么可以先判断数据是否存在，再渲染Context.Provider：

const Context = ({ children }) => {
  const [data, setProduct] = useState();
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    var axios = require('axios');
    var config = {
      method: 'get',
      url: '<apicalling here>',
      headers: { 
        'Authorization': 'Token xyz' 
      }
    };
    axios(config)
    .then(function (response) {
      setProduct(response.data.cart[0].items);
      setIsLoading(false);
    })
    .catch(function (error) {
      console.log(error);
      setError(error);
      setIsLoading(false);
    });
  }, []);

  // 加载中状态
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 请求失败状态
  if (error) {
    return <div>数据加载失败，请稍后重试</div>;
  }

  // 数据加载完成后再初始化useReducer
  const [state, dispatch] = useReducer(cartReducer, { products: data, cart: [], });
  return <Cart.Provider value={{ state, dispatch }}>{children} </Cart.Provider>;
};

这种方式下，useReducer会在data已经有值的情况下初始化，所以products会直接是你请求到的数组，但缺点是子组件需要等待请求完成才能渲染。

注意事项 #

• 永远不要依赖异步数据来初始化useReducer的初始state，因为初始值只会在组件挂载时计算一次，异步数据回来后不会自动更新初始state
• 优先选择方案一，因为它更符合React的状态管理逻辑，也能让组件更早开始渲染，提升用户体验

内容的提问来源于stack exchange，提问作者Kazi Md Zuber