Question

我有一个退出按钮，当它点击时没有任何变化，即使有一个函数调用setState({isLoggedIn: false})我有一个componentWillMount()函数来设置它的第一个位置道具是什么，因为当我在父母身边时，它并没有变为真实。

如何解决此问题，因为反应不会引发任何错误。我一直在看这个好时光，但没有用。

一些代码

onLogOutClick(){
    this.setState({
       isLoggedIn: false,
    )}
}

componentWillMount(){
    this.setState({
        isLoggedIn: this.props.IsLoggedIn
    }, function(){

    });
}

...

{this.props.IsLoggedIn ? (
        <ul className="nav navbar-nav navbar-right">
            <li> 
                <button 
                    onClick={() => this.onLogOutClick()} 
                    className="form-control" 
                    style={{ 
                        marginTop: "10px", 
                        color: "black", 
                        border: "none" 
                    }} 
                >
                    <span className="glyphicon glyphicon-log-out"/>
                    &nbsp;&nbsp;LogOut {this.state.Username}
                </button>
            </li>
        </ul>    
    ) : "LOGGED OUT" 
}

在登录时从已注销更改为按钮但反过来不起作用

Answer 1

问题是您正在设置本地状态loggedIn而不是作为props传递的父状态，但您正在使用props中的loggedIn值。

您应该做的是更新父状态，以便更新道具。

在父母：

 onLogOutClick(){
    this.setState({
       isLoggedIn: false,
    )}
}

在孩子：

{this.props.IsLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.props.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

Answer 2

如果不触发事件，则无法更改子组件中props的值。在这里，您检查了来自父组件的“this.props.IsLoggedIn”，并且您正在尝试更改子组件的状态。您可以检查“this.state.isLoggedIn”代替“this.props.IsLoggedIn”以正确使用您的代码。

编辑前的代码：

 {this.props.IsLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

编辑后的代码：

{this.state.isLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

反应js不能更新孩子的道具

2 个答案: