Question

AppContextProvider包装所有组件（私有和非私有）。登录后，将调用分派，并且用户信息将在私有应用栏中更新和查看。但是，当导航到另一条私有路线时，应用程序栏将返回到上下文默认状态。

class App extends Component {
  render() {
    return (
      <AppContextProvider>
        <MuiThemeProvider theme={theme}>
          <CssBaseline />
          <BarSelector isTop={true} className={styles.appBar} />
          <Router />
          <BarSelector isTop={false} className={styles.appBar} />
        </MuiThemeProvider>
      </AppContextProvider>
    );
  }
}

设置上下文提供程序。在路由器中导航时会调用此方法，并且即使未调用调度，它也会重置值/状态。

import React, { createContext, useReducer } from 'react';
import UserReducer from '../reducers/user';

let initialState = {
  User: {
    FName: 'myfname',
    LName: 'mylname',
  }
}

let AppContext = createContext();

function AppContextProvider(props) {
  console.log(`AppContextProvider !!!!!`);
  let [state, dispatch] = useReducer(UserReducer, initialState);
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {props.children}
    </AppContext.Provider>
  );
}
export { AppContext, AppContextProvider };

Answer 1

尝试将muiThemeProvider设置为第一个提供程序。因此，AppContextProvider是主题提供程序的子级。

页面之间路由时Context.Provider重新呈现为初始状态

1 个答案: