React-redux-firebase:未捕获的错误:提供的 prop/s“调度”保留用于内部 firebaseConnect() 使用
Posted
技术标签:
【中文标题】React-redux-firebase:未捕获的错误:提供的 prop/s“调度”保留用于内部 firebaseConnect() 使用【英文标题】:React-redux-firebase: Uncaught Error: Supplied prop/s "dispatch" are reserved for internal firebaseConnect() usage 【发布时间】:2019-10-03 11:39:36 【问题描述】:我正在使用路由配方让用户能够在页面之间查看/重定向,具体取决于用户是否登录 (https://github.com/prescottprue/react-redux-firebase/blob/next/docs/recipes/routing.md-react-routerv4+redux-auth-wrapperv2)。
当我注销时,它会重定向到登录页面但保持空白,我收到错误:
"Uncaught Error: Supplied prop/s "dispatch" are reserved for internal firebaseConnect() usage."
我的Login.js
组件正在使用firebaseConnect()
。如果一个组件正在使用 firebase,而另一个组件也在使用 firebase,是否会出现问题?
在我正在关注的教程中,firebase、react-redux-firebase 的版本确实不同,但我确实根据文档设置了所有内容并尝试使用最新版本。我不知道这是否与问题有关。
来自 App.js:
<Route
exact
path="/login"
component=UserIsNotAuthenticated(Login)
/>
来自 Login.js:
onSubmit = e =>
e.preventDefault();
const firebase = this.props;
const email, password = this.state;
firebase
.login(
email,
password
)
.catch(err => alert('Invalid Login Credentials'));
;
export default firebaseConnect()(Login);
package.json:
"dependencies":
"classnames": "^2.2.6",
"firebase": "^6.0.2",
"history": "^4.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.3",
"react-redux-firebase": "^3.0.0-alpha.12",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"redux": "^4.0.1",
"redux-auth-wrapper": "^2.1.0",
"redux-firestore": "^0.7.4"
,
【问题讨论】:
【参考方案1】:我设法解决了这个问题。通过Docs(http://docs.react-redux-firebase.com/history/v3.0.0/docs/recipes/routing.html),UserIsNotAuthenticated
直接在组件中使用,而不是在路由级别,并与withFirebase
一起使用。
所以它看起来像这样:
App.js - 在Login
路由上删除UserIsNotAuthenticated
:
<Route exact path="/login" component=Login />
登录.js:
import compose from 'redux';
import withFirebase from 'react-redux-firebase';
import UserIsNotAuthenticated from '../../helpers/auth';
...
export default compose(
UserIsNotAuthenticated,
withFirebase
)(Login);
现在一切正常。登录后,您将从登录页面重定向到主页,当您注销时,您将重定向到登录页面。
【讨论】:
以上是关于React-redux-firebase:未捕获的错误:提供的 prop/s“调度”保留用于内部 firebaseConnect() 使用的主要内容,如果未能解决你的问题,请参考以下文章
使用 Firestore 通过“react-redux-firebase”存储配置文件数据?
如何纠正 Redux 商店中的 React-Redux-Firebase 错误
使用 react-redux-firebase 消费云功能 - React JS
使用 React 和 react-redux-firebase 在登录期间确定范围
如何使用 react-redux-firebase 将 'auth' 或 'profile' 对象传递给 firestoreConnect()?