пытаясь выполнить функцию, которая передается компоненту с использованием контекста

Question

Я пытаюсь изучить концепцию context в реакции, я пытаюсь передать функцию, которая закрывает текущий пользовательский сеанс, компоненту, использующему контекст, я следую контекстному руководству в Обновление контекста из раздела Nested Component , но при нажатии на кнопку выхода из системы я получаю следующее сообщение Expected onClick listener to be a function, instead got a value of object type.

Код следующий

Я создаю контекст спустая функция в качестве значения по умолчанию

const LogoutContext = React.createContext(() => {});

Компонент Root имеет свойство состояния, которое вызывает обработчик выхода из системы, и я передаю в качестве значения Provider все состояние, как я прочитал в документации

class Root extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: null,
      password: null,
      currentUsername: null,
      logout: this.handleLogout 
    };

    this.handleLogout = () => {
      this.setState({ currentUsername: null });
    };    
  }

  render() {
    const currentUsername = this.state.currentUsername;

    if (currentUsername) {
      return (
        <LogoutContext.Provider value={this.state}>
          <Dashboard username={currentUsername} />
        </LogoutContext.Provider>
      );
    }

    return (
      <Login />
    );
  }
}

Компонент панели инструментов отображает компонент Navbar, который является компонентом, который получает функцию, используя контекст, который мне нужно выполнить

function Dashboard(props) {
  return (
    <div>
      <Navbar />
      <Main />
    </div>
  );
}

В целевом компоненте я ожидаю, что функция будет выполнена, нажав накнопку выхода, но вместо этого я получаю сообщение об ошибке

function Navbar(props) {
  return (
    <LogoutContext.Consumer>
      {logout => (
        <nav>
          <ul>
            <li>
              <button onClick={logout}>Logout</button>
            </li>
          </ul>
        </nav>
      )}
    </LogoutContext.Consumer>
  );
}

Благодарю ваш наблюдательионы

Answer 1

Есть 2 проблемы. Во-первых, вы передаете весь объект состояния в качестве значения вашего провайдера контекста, когда кажется, что вы хотите передать только функцию выхода из системы. Во-вторых, свойство выхода из системы устанавливается в состояние до определения this.handleLogout, поэтому оно должно иметь значение undefined.

Состояние должно использоваться только для значений, которые будут меняться в течение жизненного цикла компонента. ,Простое решение - просто удалить выход из состояния и передать this.handleLogout в качестве значения контекста.