ReactJS在将挂钩与react路由器dom v6一起使用时出错

Question

我正在使用react路由器dom v6(测试(来创建路由。在其中一个删除路由中，我没有得到api的结果，因为我有一个错误。我无法通过useParams((获取url中传递的参数，以便在api中进行搜索。错误为

未处理的拒绝(错误(：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
1。React和渲染器(如React DOM(的版本可能不匹配
2。你可能违反了钩子规则
3。您可能在同一个应用程序中有多个React副本
请参阅以获取有关如何调试和修复此问题的提示
▶2个堆叠框架倒塌
useParams
C:/wamp64/packages/react router/modules/index.js:383
380|*这对于需要知道"活动"状态的组件很有用，例如
381|*
382|*/
383|导出函数useMatch(to(｛
384|let location=useLocation((；
385|let resolvedLocation=useResolvedLocation(touseParams((
|^19|const-response=await-api.get(/users/delete/${id}/Gla123(
20|this.setState({message:response.data.message}(

我的代码：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
import api from '../../services/api';
import './styles.css';
export default class Delete extends Component {
state = {
message: "Deleting user...",
}
componentDidMount() {
this.renderResult();
}
renderResult = async () => {
const { id } = useParams();
const response = await api.get(`/users/delete/${id}/Gla123`);
this.setState({ message: response.data.message });
}
render() {
return (
<div className="userDeleted">
<div className="message">{this.state.message}</div>
</div>
);
}
}

Answer 1

您不能在类组件内部使用钩子。相反，您应该使用withRouter HOC并从match属性中获取params。