如何解决无效的挂钩调用挂钩只能在功能组件的主体内部调用
请查看以下代码中elfe-if
条件内的validate方法。我无法调用useLocation
的{{1}}方法。我在网上看到了一些问题,其中一个与此类似:Invalid hook call。但是该解决方案建议从类更改为函数。这可能不是我的解决方案,因为我在表单验证期间使用类的实例来查找值。
react-router-dom
解决方法
useLocation
是custom react hook,并且只能在function component内部使用,即定义为javascript函数的组件。您的组件是一个类组件。
要访问路由器上下文在类组件中提供的location
对象,可以使用withRouter
HOC:
import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,location: PropTypes.object.isRequired,history: PropTypes.object.isRequired
};
render() {
const { match,location,history } = this.props;
return <div>You are now at {location.pathname}</div>;
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
HOC将路由器上下文作为道具match
,location
和history
注入到您的组件中。
在类组件中不支持钩子。如果您不能轻易地将其重写为功能组件,则一种选择是将类组件包装为功能组件,然后将location
作为道具传递。看来您只在使用params.pathname
,所以您可以将其传递进来。
类似这样的内容(组件名称仅是一个建议):
- 将
Reset
重命名为ResetBody
- 通过扩展为道具创建新类型。
interface IResetProps extends IFormProps {
adminID : string;
}
- 创建一个名为
Reset
的新组件,如下所示:
function Reset(props : IFormProps){
const params = useLocation(); //<------ unable to call this ------------
const adminID = params.pathname.substr(params.pathname.lastIndexOf('/')+1);
return <ResetBody {...props} adminID={adminID} />
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。