Question

我有一个用于用户登录的React容器。挂载时，它将获取一些第三方脚本并将其注入页面（这将创建一个登录小部件）

登录阶段分为两个部分，第一部分是登录到第三方系统，完成后，我需要使用第一个系统中的有效负载登录到第二个系统。

我在componentDidMount上发出了获取第三方脚本的请求，这一切都很好。

当我单击登录按钮（它是第三方提供的预先构建的小部件，可以触发我们可以挂接到的回调，而无需自己创建小部件等）时，回调便触发，并且我们得到了一个客户令牌回来了，这里一切都很好。

我无法使用该客户令牌的部分，我使用redux将其添加到商店中，在componentDidUpdate内部，然后针对当前道具检查prevProps以检查令牌（如果存在）我触发操作以登录第二个系统。我想避免多次触发该动作，因此一旦将其添加到存储中，然后在hasRequested中对此字段进行检查，以防止多次触发该动作，则触发该动作。

该位不起作用，因为我在页面上有componentDidUpdate的多个实例，LoginContainer多次触发，并且商店没有及时使用{{ 1}}的价值，结果是我最终提出了多个API请求。

任何人都知道我如何拥有一个容器的多个实例，但如何限制一个动作在其道具更新时触发的次数？

下面的示例代码

LoginContainer

componentDidUpdate

身份验证减少器

hasRequested

身份验证操作

class LoginContainer extends Component {
  /**
   * componentDidMount
   */
  componentDidMount () {
    if (!this.props.thirdPartyCode.hasRequested) {
      this.props.fetchThirdPartySriptsAndLoad();
    }
  }

  /**
   * componentDidUpdate
   */
  componentDidUpdate (prevProps) {
    if (
      prevProps.authentication.customerToken !== this.props.authentication.customerToken
      && !this.props.authentication.hasRequested
    ) {
      this.props.authenticateUserWithSecondSystem();
    }
  }

Answer 1

最后，我决定尝试使其变得过于复杂，我选择了一个名为authenticateUser的操作，该操作在单击时被调用，并处理登录到第一个提供程序然后登录的逻辑。第二。

Redux存储区中的组件没有更新

1 个答案: