在帖子底部更新
我有一个 React 容器组件 AppContainer 可以检测用户是否已通过身份验证。如果用户通过身份验证，它会显示路由、应用程序、 header 等。如果用户未通过身份验证，它会显示一个登录组件。
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 函数是一个 Action 创建者，它只是将用户信息存储在 redux 存储中。 Login.isAuthenticated 的默认状态为 false。
在 componentDidMount() 中，我检查 this.props.isAuthenticated(来自 redux 存储中的用户信息)是否为真。如果不是，我检查 tokenId 是否在 localStorage 中。如果 token 在 localStorage 中，我将发送 loginSuccess 操作以将该信息添加到 redux 存储中。
然后，由于该信息在 Redux 存储中，该组件将更新并显示 protected 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"),
})
}
}
}
唯一的问题是我收到以下警告:
警告:setState(...):只能更新已安装或安装的组件。这通常意味着您在未安装的组件上调用了 setState() 。这是一个空操作。请检查 t 组件的代码。
虽然给出的错误表明 setState() 有问题，但我并没有在整个程序的任何地方调用 setState()，所以...但是删除了 this.props.loginSuccess({ ... 也消除了错误。
我的代码中的 log 语句在错误之前打印，如果存在身份验证，组件会按预期呈现 protected 信息。如果组件似乎正常工作，为什么会出现此错误？
更新:
查看堆栈跟踪显示它来 self 正在使用的 google-login 实用程序。
这是该组件的代码:https://github.com/anthonyjgrove/react-google-login/blob/master/src/google.js
最佳答案
这是 NPM 包提供的 google-login React 组件的问题。我通过根据 Redux 状态中的 isAuthenticated 值有条件地渲染 google-login 组件(在其自己的容器组件中，原始问题中未提及)来解决此问题。
关于javascript - Redux 不允许在 componentDidMount 内部调度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40141368/