时间戳

首页 > 解决方案 > TypeError: this.props.logout 不是函数

reactjs - TypeError: this.props.logout 不是函数

问题描述

从 Login 类以 render 方法发送道具，但 Admin 类无法读取传递的道具。Admin 类既不读取注销方法，也不读取状态变量 isAuthenticated。

class Login extends React.Component {
    constructor...

    handleLogin...//Function

    logout...//Function

    render(){
        if(!this.state.isAuthenticated){
        return (
        <div className="login-wrapper">
            <Route path="/admin" render={(e)=><Admin isAuthenticated={this.state.isAuthenticated} logout={this.logout.bind(this)}></Admin>}></Route>
            <div className="login"> 
                <input type="text" name="id" placeholder="Enter ID" value={this.state.id} onChange={(e)=>this.setState({id:e.target.value})}/>
                <br/>
                <input type="password" name="password" placeholder="Enter Password" value={this.state.password} onChange={(e)=>this.setState({password:e.target.value})}/>
                <br/>
                <button type="submit" onClick={(e)=>{this.handleLogin(e)}}>Login</button>
            </div>
        </div>
        )
        }
        else{
            return(
            <div>
            <Route path="/admin" render={(e)=><Admin isAuthenticated={this.state.isAuthenticated} logout={this.logout.bind(this)}></Admin>}></Route>
            <Redirect to="/admin"></Redirect>
            </div>
        )}
}
}

管理类显示 this.props.logout() 不是函数。

class Admin extends React.Component{
    constructor(props){
        super(props);
        this.state={};
    }

    render(){ 
        return(
            <React.Fragment>
                   <div id="menu">
                        <button onClick={(e)=>{this.props.logout()}}>Logout</button>
                   </div>
            </React.Fragment>
        )
    }
}

标签： reactjs

解决方案

好的，所以我认为您的方法略有错误

你不应该渲染这个：

          <Route
            path="/admin"
            render={e => (
              <Admin
                isAuthenticated={this.state.isAuthenticated}
                logout={this.logout}
              />
            )}
          />
          <Redirect to="/admin" />

在注销组件中

您需要做的就是移动此代码：

  logout = e => {
    console.log("Logging out...");
    localStorage.removeItem("admin");
    this.setState({
      isAuthenticated: false
    });
  };

到App.js文件，然后传递logout到这条路线：<Route path="/admin" component={Admin} />

像这样：<Route path="/admin" component={Admin} logout={this.logout}/>

您还需要放入isAuthenticated该组件的状态

你应该让你所有Route的人都住在同一个地方，如果你需要在不同的组件中去不同的路线，然后使用<Link />

让我知道这是否有帮助

推荐阅读