Реагировать на обработчик события onClick, не работающий с помощью Next.js

Question

Я делаю клон Reddit и использую Next.js, так что его серверная часть отображается.Я начал без использования Next.js, и когда я узнал об этом, я сразу переключился на него.

Я создал пользовательский _app.js, чтобы заголовок и боковая панель существовали на каждой странице, и чтобы она действовалакак самый верхний компонент для хранения состояния приложения.Последнее не совсем работает.

Вот .project/src/pages/_app.js:

import App, { Container } from 'next/app';

// Components
import Header from '../components/Header/Header';

const MainLayout = props => (
  <React.Fragment>
    <Header
      isSidebarOpen={props.isSidebarOpen}
      sidebarToggle={props.sidebarToggle}
    />
    {props.children}
  </React.Fragment>
);

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  state = {
    isSidebarOpen: true
  };

  sidebarToggle = () => {
    this.setState({ isSidebarOpen: !this.state.isSidebarOpen });
  };

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <MainLayout
          isSidebarOpen={this.state.isSidebarOpen}
          sidebarToggle={this.sidebarToggle}
        >
          <Component {...pageProps} />
        </MainLayout>
      </Container>
    );
  }
}

У меня проблема в том, что isSidebarOpen и sidebarToggle передаются именно туда, гдеОни мне нужны - они отображаются в консоли - но обработчик onClick не активируется, и если я изменю isSidebarOpen, он не вступит в силу, пока я не перезапущу сервер.Я использовал этот подход перед использованием Next.js, и он работал как ожидалось.

Как мне добиться того, что я пытаюсь сделать?Я прочитал документы, искал Google и переполнение стека.Я даже проверил проблемы их репо без удачи.Я подозреваю, что это как-то связано с пользовательским _app.js, так как реквизиты передаются правильно.

Answer 1

Одной из возможностей может быть определение вашей sidebarToggle функции в компоненте, который вы используете. (Может быть, потому что при вызове его внутри Component код может выполняться в _app.js вместо вашего компонента, это может быть большим!попробуйте)

Здесь _app.js - это оболочка для вашего приложения, и я не думаю, что она подходит для использования в самом верхнем компоненте для хранения состояния.Лучше сделать так, чтобы простой корневой компонент реагировал на это!