Reactjs 使用useParams的路由容器组件中出现挂钩错误

我使用的路线如下：

import React from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AdminBank from 'views/Bank/Bank';
import CustomerBank from 'views/CustomerBank/CustomerBank';

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({}, dispatch),
});

const BankContainer = (props) => {
  const { userType } = useParams();
  return (
    userType === "admin" ? <AdminBank/> : <CustomerBank/>
  )
}

export default connect(
  BankContainer,
  mapDispatchToProps
)(BankContainer);

export default connect(
  null,
  mapDispatchToProps
)(BankContainer);

错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

my package.json版本：

"react-redux": "^7.2.0",
"react-router-dom": "5.2.0",
"react": "16.13.1",
"react-dom": "16.13.1",

事情是我试过的：

已检查react捆绑程序问题

切换到视图，而不仅仅是反应容器

试过其他钩子，还是一样的问题

---

您正在将

BankContainer

传递给connect函数的

mapstatetops

参数，这显然是错误的。您应该做一些其他的事情…

您正在将

BankContainer

传递给connect函数的

MapStateTops

参数，这肯定是错误的。你应该做点别的…

嗨，作为@thatthappingdude，在第一个答案中说这个正确的反应redux connect得到2个参数，它们是 mapStateToProps-将您作为道具从redux带回请求的状态 mapDispatchToProps-将您作为道具从redux带回请求的操作 如果你不想通过其中一个考试，你应该这样做：

import React from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AdminBank from 'views/Bank/Bank';
import CustomerBank from 'views/CustomerBank/CustomerBank';

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({}, dispatch),
});

const BankContainer = (props) => {
  const { userType } = useParams();
  return (
    userType === "admin" ? <AdminBank/> : <CustomerBank/>
  )
}

export default connect(
  BankContainer,
  mapDispatchToProps
)(BankContainer);

export default connect(
  null,
  mapDispatchToProps
)(BankContainer);

---

第二个也一样。

嗨，就像@thatthappingdude在第一个答案中说的那样，这个正确的反应redux connect得到2个参数，它们是 mapStateToProps-将您作为道具从redux带回请求的状态 mapDispatchToProps-将您作为道具从redux带回请求的操作 如果你不想通过其中一个考试，你应该这样做：

import React from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AdminBank from 'views/Bank/Bank';
import CustomerBank from 'views/CustomerBank/CustomerBank';

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({}, dispatch),
});

const BankContainer = (props) => {
  const { userType } = useParams();
  return (
    userType === "admin" ? <AdminBank/> : <CustomerBank/>
  )
}

export default connect(
  BankContainer,
  mapDispatchToProps
)(BankContainer);

export default connect(
  null,
  mapDispatchToProps
)(BankContainer);

---

对第二个进行相同的处理。

不清楚在何处渲染

BankContainer

？

BankContainer

和

Bank

一样吗？很抱歉，是的，Bank和BankContainer是同一个组件。你把

useLayoutEffect

叫做任何地方吗？还有

Bank

里面有redux的

提供者吗？这就是为什么我感到困惑的原因，我从来没有在这个项目的任何地方使用过这个钩子。只是使用效果。我知道useContext来自react路由器。不确定useLayoutEffect来自何处。不清楚在何处渲染
BankContainer
？
BankContainer
和
Bank
一样吗？很抱歉，是的，Bank和BankContainer是同一个组件。你把
useLayoutEffect
叫做任何地方吗？还有
Bank
里面有redux的
提供者吗？这就是为什么我感到困惑的原因，我从来没有在这个项目的任何地方使用过这个钩子。只是使用效果。我知道useContext来自react路由器。不确定useLayoutEffect是从哪里来的。是的，我只是创建了一个映射函数。我不知道为什么我通过了组件lol。还将研究useSelector，再次感谢大家，嗯。。。你能把它标为答案吗？同样检查redux钩子和redux工具包，连接在这一点上被认为是过时的。哦，是的，我的坏家伙，是的，我只是创建了一个映射函数。我不知道为什么我通过了组件lol。还将研究useSelector，再次感谢大家，嗯。。。你能把它标为答案吗？另外，检查redux挂钩和redux工具包，连接在这一点上被认为是过时的