在 React 生命周期方法中多次分派操作答案

【问题标题】：Action dispatched multiple times in React lifecycle method在 React 生命周期方法中多次分派操作
【发布时间】：2018-01-27 18:00:42
【问题描述】：

我正在开发一个应用程序，该应用程序具有在用户注册应用程序时验证电子邮件的功能。当您用户注册时，会生成一个代码并将一个链接发送给用户。当用户点击链接时，前端与后端签入以验证代码。如果代码签出，则在用户数据库中切换“激活”标志，并将用户重定向到登录屏幕。

我将GraphQL 用于数据库内容，Redux 用于状态管理，我的操作如下所示：

export function confirmActiveUser(token) {
    return function (dispatch) {
        dispatch(activateUserRequest())
        apolloClient.mutate(
            {
                mutation: CONFIRM_EMAIL,
                variables: { token: token }
            }
        ).then((res) => {
            let { error, ok } = res.data.confirmEmail;
            if (ok === true) {
                dispatch(activateUserSuccess())
            } else {
                dispatch(activateUserFailure())
            }
        })
    }
}

激活页面组件如下所示：

// mapStateToPropsFunction
// mapDispatchToPropsFunction
class MyActivationComponent extends React.Component {
    componentDidMount() {
      this.props.confirmActiveUser(this.props.params.id) // the generated token
    }

    render() {
       <div>
           {this.props.ifIsActivated
              ? // redirect to sign in
              : // do something else
           }
       </div>
    }
}

问题在于，confirmActiveUser 操作被分派了两次（因此进行了 2 次数据库调用），我认为这是由于状态更改 activateUserRequest 和 activateUserSuccess 导致重新渲染。

验证应该在页面（或者更确切地说，组件加载）时发生，而不是在按下按钮时发生。所以，我本质上是在尝试避免多次调用数据库。

是什么导致了这些多次调用，以及执行上述操作的首选方法是什么。

非常感谢，感谢您的帮助。

【问题讨论】：

我没有看到你想要做的真正用例，可能你过度设计了一些非常简单的东西。
@Hosar 怎么会这样？用户需要验证电子邮件，并且需要有某种消息取决于验证是失败还是成功。你的评论很模糊，你认为什么是不必要的？基于状态的条件渲染？在组件加载时使用生命周期方法调度操作？在我的应用程序中使用 Redux？调度成功/失败动作？你是对的，我可能过度工程，但这并不能回答为什么我会收到多个电话到componentDidMount 的问题。你感觉到我了吗？
@user2444217 我认为您在此处发布的代码没有任何问题。您能否发布容器和组件的完整代码。
@user2444217 如果您在 componentDidMount 中调用“confirmActiveUser”，则在状态更改时不会再次调用它。我认为要么你是从其他地方调用这个方法，要么你的组件以某种方式再次安装在 dom 上。
@Prakashsharma 经过一些测试，我注意到componentDidMount 在生产模式下被调用了两次，但在开发模式下只被调用了一次......这听起来一点也不对吗？抱歉，我无法提供更多详细信息。

标签： reactjs redux react-redux graphql

【解决方案1】：

如果您确定动作创建者确实从componentDidMount 调用了两次，那么我认为您正在安装组件两次（渲染两次或安装、卸载、重新安装）...

【讨论】：