React useContext状态更新后组件未同步渲染问题排查

你当前代码存在两个直接导致状态不同步、UI无法更新的核心错误：

• Reducer 返回结构错误：你定义的mainReducer返回值多嵌套了一层data属性，实际useReducer维护的状态结构为{ data: 实际业务状态 }，和你预期的扁平状态结构完全不符。组件中直接从顶层state解构isDisplay等字段永远拿到undefined，你排查到的“状态已变更”实际是变更了state.data下的字段，组件读取的路径完全错误。
• Context 作用域错误：React Context 规则要求，只有被Provider包裹的子组件才能订阅上下文更新。你在App组件顶层直接调用useContext，但AppProvider是在App的return 中才渲染，意味着App组件本身根本不在AppProvider的作用域内，永远只能拿到createContext时传入的默认初始值，不会响应任何状态更新。只有AppProvider包裹的按钮、卡片等子组件处于上下文订阅范围内。

按以下步骤修改即可解决问题：

1. 修正context.tsx中的reducer逻辑，去掉多余的状态嵌套
   删掉原有错误嵌套的mainReducer写法，直接返回业务状态即可，同时去掉错误的类型断言：

   // 修正后的reducer，直接返回业务状态，不额外套层
   const mainReducer = (state: InitialStateType, action: LoadUsersActions) => {
     return loadUsersReducer(state, action);
   };
   
   const AppProvider: FC = ({ children }) => {
     // 去掉as never的错误类型断言
     const [state, dispatch] = useReducer(mainReducer, initialState);
   
     // 其余useEffect、Provider返回逻辑保持不变
     useEffect(() => {
       axios.get("https://jsonplaceholder.typicode.com/users").then((result) => {
         dispatch({ type: "LOAD_USERS", payload: result.data });
       });
     }, []);
   
     return (
       <AppContext.Provider value={{ state, dispatch }}>
         {children}
       </AppContext.Provider>
     );
   };
   

   如果你不需要额外包装reducer，也可以直接把loadUsersReducer传给useReducer，省去冗余的mainReducer定义。

2. 调整App.tsx的组件结构，保证读取Context的逻辑处于Provider作用域内
   把原有App中读取Context、渲染业务UI的逻辑抽离为单独的内部组件，放在AppProvider的包裹范围内：

   // 抽离业务内容组件，该组件处于AppProvider作用域内，可以正常订阅上下文更新
   const AppContent = () => {
     const { state } = useContext(AppContext);
     const { isDisplay } = state;
     console.log(state);
   
     return (
       <main className="main">
         <Jumbotron fluid>
           <Container fluid="md">
             <h1 className="mb-5">Keep calm, take a deep breath...</h1>
             <DefaultButton />
           </Container>
         </Jumbotron>
         <Container fluid="md">
           {isDisplay ? <UsersLoaded /> : <UserCards />}
         </Container>
       </main>
     )
   }
   
   function App() {
     // 外层App仅负责挂载Provider，不要在此处读取Context
     return (
       <AppProvider>
         <AppContent />
       </AppProvider>
     );
   }
   
   export default App;
   

3. 可选优化：你当前DISPLAY_USERS动作的类型定义要求传入RawUser[]类型的payload，但实际reducer处理该动作时完全没有使用payload，按钮组件dispatch时传的state.users属于无效传参，可以将该动作的payload类型改为undefined，移除多余传参，精简代码。

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