Redux 不允许在 componentDidMount 内部调度

Question

更新在post

底部

我有一个 React 容器组件，AppContainer 用于检测用户是否已通过身份验证。如果用户通过身份验证，它会显示路由、应用程序、header 等。如果用户是un-authenticated，它会显示一个登录组件。

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 存储中的用户信息）是否为真。如果没有，我检查 tokenId 是否在 localStorage 中。如果令牌在 localStorage 中，我将发送 loginSuccess 操作以将该信息添加到 redux 存储中。

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

我的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"),
        })

      }

    }
  }

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

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the t component.

虽然给出的错误表明 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-login React 组件的问题。我通过根据 Redux 状态中的 isAuthenticated 值有条件地渲染 google-login 组件（在其自己的容器组件中，原始问题中没有特色）来修复此问题。

Redux 不允许在 componentDidMount 内部调度

Redux won't allow dispatch inside of componentDidMount

javascript

reactjs

redux

react-redux