Redux不允许在componentDidMount内部调度

Question

null

我有一个React容器组件AppContainer来检测用户是否通过了身份验证。如果用户通过了身份验证，则显示路由、应用程序、报头等。如果用户未通过身份验证，则显示登录组件。

AppContainer是一个连接的组件（使用react-redux）。MapStateToProps和MapDispatchToProps如下所示：

const mapStateToProps = function(state) {
  return {
    isAuthenticated: state.Login.isAuthenticated,
  }
}

const mapDispatchToProps = function(dispatch, ownProps) {
  return {

    loginSuccess: (user) => {
      console.log("before dispatch")
      dispatch(loginSuccess(user))
    },

  }
}

正在调度的loginsuccess函数是一个操作创建器，它只是将用户信息存储在redux存储中。login.isauthenticated的默认状态为false。

在componentdidmount()中，我检查this.props.isauthenticated（来自redux存储中的用户信息）是否为true。如果不是，我检查tokenid是否在localstorage中。如果令牌在localStorage中，我将分派loginsuccess操作将该信息添加到redux存储中。

然后，由于该信息在Redux存储中，组件将更新并显示受保护的材料。这个很管用。

我的componentdidmount函数如下：

  componentDidMount() {
    if (this.props.isAuthenticated) {
      console.log("REDUX AUTH'D")
    } else {

      if (localStorage.getItem("isAuthenticated") && !this.props.isAuthenticated) {

        console.log("BROWSER AUTHD, fire redux action")

        this.props.loginSuccess({
          profileObj: localStorage.getItem("profileObj"),
          tokenObj:   localStorage.getItem("tokenObj"),
          tokenId:    localStorage.getItem("tokenId"),
        })

      }

    }
  }

唯一的问题是我收到了以下警告：

警告：setState（...）：只能更新已装入或正在装入的组件。这通常意味着在未挂载的组件上调用setState（）。这是禁闭状态。请检查t组件的代码。

虽然给出的错误表明setState（）有问题，但我没有在整个程序中的任何地方调用setState（），所以...但是删除componentDidMount中的This.Props.LoginSuccess（{...也会删除错误。

“我的代码”中的log语句会在错误之前打印，并且如果存在身份验证，组件会按预期呈现受保护的信息。如果组件似乎在工作，为什么会出现此错误？

更新：

查看堆栈跟踪显示，它来自我正在使用的google-login实用程序。

这是该组件的代码：https://github.com/anthonyjgrove/react-google-login/blob/master/src/google.js

Answer 1

这是NPM包提供的google-loginReact组件的一个问题。我根据Redux状态下的isAuthenticated值，有条件地呈现google-login组件（在它自己的容器组件中，在原始问题中没有显示），从而解决了这个问题。