反應js無法更新孩子的道具

我有一個註銷按鈕，當它被點擊時沒有任何變化，即使有一個函數調用，但我確實有一個componentWillMount()函數來設置它在什麼位置道具是因爲我在父母身上時並沒有改變爲真實。反應js無法更新孩子的道具

如何解決此問題，因爲反應不會導致錯誤。我一直在看這個好一個小時，但無濟於事。

一些代碼

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" 
}

在登錄狀態下，但不工作的其他方式，從註銷的按鈕，改變周圍

來源

2017-07-18 andy wilson

你能告訴我更多相關的代碼。 – Natsathorn

你需要展示更多的代碼讓人們弄清楚你的問題是 –

顯示代碼！ –

的問題是，您要設置本地狀態的loggedIn而不是父母狀態，作爲道具傳遞下來，但是你正在使用道具的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" }

來源

2017-07-18 11:02:06

檢查這個答案得到如何溝通信息的父母從孩子的詳細視圖https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-它的父母in-reactjs/38397755＃38397755 –

我將需要通過該功能通過呼籲孩子將不會我 –

完美謝謝 –

你不能沒有觸發事件更改子組件的道具價值。在這裏您檢查了來自父組件的「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" }

來源

2017-07-18 11:10:04

反應js無法更新孩子的道具

回答

相關問題