为什么我重新渲染时不会调用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？

回答

相关问题