尝试执行使用上下文传递给组件的函数

Question

我正在尝试学习 context in react, I am trying to pass a function that closes the current user session to a component using context, I am following the context guide in the Updating Context from a 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 之前设置的状态，因此它的值应该是未定义的。

状态应该只用于在组件的生命周期过程中会发生变化的值。简单的解决方法是从状态中删除注销并将 this.handleLogout 作为上下文值传递。

尝试执行使用上下文传递给组件的函数

trying to execute a function that is passed to a component using context

javascript

reactjs

react-context