使用Array.reduce实现React Context Provider嵌套时依赖报错问题

你遇到的报错和「reduce先渲染内层Provider、外层未初始化」没有关系——React的组件渲染流程是严格从外到内执行的，最外层组件的函数体一定先于内层组件执行，不存在内层先跑、外层还没初始化的情况。
真正的原因是你当前的实现生成的嵌套DOM层级和预期完全相反：

• 你手写的预期层级是：最外层AuthProvider → 内层UploadProvider → 最中心的App。这个结构下UploadProvider在AuthProvider的组件树内部，执行useAuth时能正常拿到Context值。
• 你的初始实现没有正确处理数组反转逻辑，最终生成的结构是：最外层UploadProvider → 内层AuthProvider → 最中心的App。这个结构下UploadProvider跑在AuthProvider的外面，执行useAuth时父级组件链上根本没有对应的AuthContext.Provider，自然只能拿到createContext的默认值（也就是undefined），调用getAuthAxios就会直接报错。
  另外还有两个容易踩的坑需要注意：
• 你代码里直接对入参的providers调用reverse()，Array.prototype.reverse()是原地修改原数组的操作，会直接篡改父组件传入的数组引用。后续重渲染时数组会被反复反转，导致嵌套顺序随机错乱，这也是很多人写这类嵌套组件时遇到偶发报错的核心原因。
• 你在UploadProvider的返回逻辑里，笔误把UploadContext.Provider写成了AuthContext.Provider。这个bug虽然不会直接触发当前的初始化报错，但会在UploadProvider内部直接覆盖外层AuthProvider提供的Context值，导致所有内部组件拿不到正确的getAuthAxios方法，必须修正。

Nested组件的核心逻辑是：按照「providers数组顺序为从最外层到最内层」的约定，先生成数组副本反转顺序（避免原地修改），再以children为初始值，通过reduce依次把Provider包裹在当前结构外层，最终生成正确的嵌套层级：

const Nested: React.FC<{ 
  providers: React.ComponentType[]; 
  children: React.ReactNode 
}> = ({ providers, children }) => {
  // 生成数组副本后再反转，避免修改原数组
  return [...providers].reverse().reduce(
    (acc, Provider) => <Provider>{acc}</Provider>,
    <>{children}</>
  );
};

这个实现生成的嵌套结构，和你手写的<AuthProvider><UploadProvider><App/></UploadProvider></AuthProvider>完全等价，不存在层级颠倒的问题。 #

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