Крюк во вложенном компоненте - PullRequest
Новая
       1

Крюк во вложенном компоненте

0 голосов
/ 30 июня 2019

У меня есть компонент панели инструментов со следующим: 

const AdminDashboard = () => {
const { page } = useDashboard();
...
<List>
  <Sidebar />
</List>
...
<Container maxWidth="lg" className={classes.container}>
  {page}
</Container>

Внутри боковой панели у меня есть 

const Sidebar = () => {
  const { navigateTo } = useDashboard();

  return (
    <div>
      <ListItem button>
        <ListItemIcon onClick={() => navigateTo(<Category />)}>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>

export const DashboardContext = createContext<DashboardContextInterface | null>(
  null
);

const DashboardProvider = ({ children }: ProviderProps): JSX.Element => {
  const [page, setPage] = useState<JSX.Element>(Home);

  const navigateTo = (newPage: JSX.Element) => setPage(newPage);

  return (
    <DashboardContext.Provider value={{ page, navigateTo }}>
      {children}
    </DashboardContext.Provider>
  );
};

export const useDashboard = () => {
  const context = useContext(DashboardContext);
  if (context === null)
    throw new Error('useAuthState must be used within a AuthProvider');

  return context;
};

И я думаю, что именно это и дает мне ошибку 

Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.
    in DashboardProvider (at App.tsx:31)
    in MuiPickersUtilsProvider (at App.tsx:30)
    in AuthProvider (at App.tsx:29)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:28)
    in App (at src/index.tsx:7)

есть ли способ заставить это работать в любом случае?Я хочу, чтобы кнопки внутри боковой панели определяли, какой контент отображается в контейнере панели инструментов

Это app.tsx 

const App: React.FC = () => {
  return (
    <Router>
      <AuthProvider>
        <MuiPickersUtilsProvider utils={LocalizedUtils} locale={nlLocale}>
          <DashboardProvider>
            <AdminRoute exact path="/dashboard" component={AdminDashboard} />
          </DashboardProvider>
          <Page exact path="/" component={Home} />
          <Page exact path="/login" component={Login} />
          <Page exact path="/register" component={Register} />
          <Page exact path="/products" component={Products} />
          <UserRoute exact path="/profile" component={Profile} />
        </MuiPickersUtilsProvider>
      </AuthProvider>
    </Router>
  );
};
...