爲什麼我重新渲染時不會調用componentDidMount？

我有多種模式用於註冊，並且遇到問題。我總共有三個動作。首先註冊按鈕，然後激活第一個註冊模式，以註冊谷歌或Facebook，然後完成模式的附加信息，無法由提供商收集將出現預填充輸入收集形式提供商。我在呈現應用程序時呈現兩種模式，並且只在單擊註冊按鈕時才顯示它。我需要在完成Facebook或Google登錄後調用componentDidMount，但在應用程序拳頭啓動時呈現模態時會調用它。這些按鈕打擊動作減速器和減速器，以改變布爾型的狀態以顯示模式。爲什麼我重新渲染時不會調用componentDidMount？

class HeaderRegisterButton extends Component { 
    render() { 
    return(
     <div> 
     <Register1/> 
     <Register2/> 
     </div> 
    ); 
    } 
}

註冊模態1

class Register1 extends Component { 
    render() { 
    return(
     <div> 
     <button onClick={() => this.props.showRegister2()} /> //This would hit the action reducer to get initial info and change the bool to show register 1 to false and register 2 to true. 
     </div> 
    ); 
    } 
}

註冊模態2

import { reduxForm, Field, initialize } from 'redux-form'; 

class Register2 extends Component { 

    componentDidMount() { 
    hInitalize() //only called when the app fires, not when the state changes in the action reducer to change bool to show this modal. 
    } 

    hInitalize() { 
    var initData = {}; 
    const initData = { 
    "name" = this.props.name//name stored inside redux store 
    }; 
    this.props.initialize(initData) 
    } 



    render() { 
    return(
     <div> 
     //Code to display the modal which works. 
     </div> 
    ); 
    } 
}

來源

2017-02-21 joethemow

'componentDidMount'只調用一次，而不是每次重新渲染。這將是'componentDidUpdate'。 – Li357

正是我所需要的！ – joethemow

@AndrewLi這實際上創建了一個問題，我無法輸入任何輸入/表格 – joethemow

componentDidMount僅在任何組件的生命週期調用一次，重新渲染不會重新初始化組件。將調用componentDidUpdate，您可以在其中管理您的邏輯。

來源

2017-02-21 05:09:48

我無法輸入任何輸入/窗體，當我在componentDidUpdate中進行initalization時。 – joethemow

http://stackoverflow.com/questions/40196473/cant-type-in-text-field-using-redux-form和https://codegists.com/snippet/javascript/redux-form-tutjs_parkerproject_javascript恰恰是我我正在努力去做。 – joethemow

我確實認爲這是正確的答案。 –

IMO您不需要調用componentDidMount，只需向父組件提供一些回調，該組件可以在過程中保存所需/收集的所有信息的臨時狀態。你的每一個模態都會顯示這個父組件給它們的信息。

該過程將是這樣的。

註冊按鈕點擊了谷歌和Facebook
顯示選擇
用戶點擊谷歌或Facebook
通過社交媒體帳戶
從認證數據發送回父組件進行認證暫時存儲
輔助註冊表單顯示從父母組件給它的數據
使用[R填寫二次形式
Submit按鈕，點擊在行動
使用數據

希望是有道理的:)

UPDATE：

嗯，我不要」 t知道你的實現是怎麼樣的......但是你可以傳遞函數到子組件中（通過道具），並在孩子中使用它們與父代進行通信，所以在Facebook認證的組件中有父傳遞someCallback接受下面顯示的參數並將它們添加到父項狀態（記住狀態更改將導致使用該狀態的任何組件更新）。我已經通過傳遞fbLoginCallback作爲回調我的Facebook登錄的過程，稱這樣做Facebook的FB.getLoginStatus(....)

export class FbLoginButton extends Component { 
    constructor(props) { 
     super(props); 
    } 
    fbLoginCallback = response => { 
     const { authResponse, status } = response; 
     if (status === 'connected') { 
      // Logged into your app and Facebook. 
      const userId = authResponse.userID; 
      const accessToken = authResponse.accessToken; 

      FB.api('/me', user => { 
       const displayName = user.name; 

       this.props.someCallback(userId, accessToken, displayName); 
      }); 
     } 
    } 
}

我已經刪除的實際按鈕和其他一些小東西的呈現，但是這或多或少如何回調應該去。

來源

2017-02-21 21:10:05 Tyler

我該怎麼做第5步？ – joethemow

@joethemow更新了答案 – Tyler

爲什麼我重新渲染時不會調用componentDidMount？

回答

相關問題