为什么我重新渲染时不会调用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>
);
}
}
componentDidMount
仅在任何组件的生命周期调用一次,重新渲染不会重新初始化组件。将调用componentDidUpdate
,您可以在其中管理您的逻辑。
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);
});
}
}
}
我已经删除的实际按钮和其他一些小东西的呈现,但是这或多或少如何回调应该去。
'componentDidMount'只调用一次,而不是每次重新渲染。这将是'componentDidUpdate'。 – Li357
正是我所需要的! – joethemow
@AndrewLi这实际上创建了一个问题,我无法输入任何输入/表格 – joethemow