Question

我正在尝试在反应中学习context的概念，我正在尝试使用上下文将函数关闭当前用户会话的功能传递给我，我正在遵循{{3}中的上下文指南}部分，但是当单击注销按钮时，我收到以下消息Expected onClick listener to be a function, instead got a value of object type.

代码如下

我使用空函数作为默认值创建上下文

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

Root组件具有as state属性，该属性调用注销处理程序，而我正在将整个状态作为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

有两个问题：首先，您似乎将整个状态对象传递为上下文提供者的值，好像您只想传递注销函数一样。其次，注销属性在定义this.handleLogout之前设置为状态，因此其值应为undefined。

状态仅应用于将在组件生命周期中更改的值。简单的解决方法是仅从状态中注销并传递this.handleLogout作为上下文值。

尝试执行使用上下文传递给组件的功能

1 个答案: