为什么在我重新渲染时没有调用 componentDidMount? [英] Why is componentDidMount not being called when I re-render?

问题描述

我有多个用于注册的模式，但遇到了问题.我一共有三个动作.首先是注册按钮，然后激活第一个注册模式以注册 google 或 facebook，然后完成模式以获取提供者无法收集的其他信息，将与预先填写的输入收集表单提供者一起出现.我在呈现应用程序时呈现两个模态，并且仅在单击注册按钮时显示它.我需要在完成 facebook 或 google 登录后调用 componentDidMount，但在应用程序开始时呈现模态时调用它.按钮点击动作减速器和减速器改变 bool 类型的状态是否显示模态.

class HeaderRegisterButton extends Component {使成为() {返回(<div><注册 1/><注册 2/>

);}}

注册模态 1

class Register1 扩展组件 {使成为() {返回(<div><button onClick={() =>this.props.showRegister2()}/>//这将命中action reducer以获取初始信息并更改bool以将寄存器1显示为false并将寄存器2显示为true.

);}}

注册模态 2

import { reduxForm, Field, initialize } from 'redux-form';类 Register2 扩展组件 {componentDidMount() {hInitalize()//仅在应用程序启动时调用，而不是在 action reducer 中的状态更改以更改 bool 以显示此模式时调用.}hInitalize() {var initData = {};常量初始化数据 = {"name" = this.props.name//name存储在redux store中};this.props.initialize(initData)}使成为() {返回(<div>//代码来显示有效的模态.

);}}

解决方案

componentDidMount 在任何组件的生命周期中只会被调用一次，重新渲染不会重新初始化组件.componentDidUpdate 将在您可以管理逻辑的地方被调用.

I have multiple modals for signing up, and having trouble with it. I have three actions in total. First the register button which then activates the first register modal to either sign up with google or facebook, then after that completes the modal for additional information which could not be gathered by the provider will appear with pre-filled inputs gathered form provider. I render the two modals when I render the application and only show it when the register button is clicked. I need the componentDidMount to be called after I complete the facebook or google login, but it was called when I rendered the modals when the app fist started. The buttons hit action reducers and reducers changing the state of type bool on wether to show the modal or not.

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

Register Modal 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>
     );
   }
 }

Register Modal 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>
     );
   }
 }

解决方案

componentDidMount is only called once in the lifecycle of any component, re-render will not reinitialize the component. componentDidUpdate will be called where you can manage your logic.

这篇关于为什么在我重新渲染时没有调用 componentDidMount?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！