javascript - 无效的挂钩调用。钩子只能在里面调用......如何解决这个维护反应类组件
问题描述
我是一个反应初学者，所以我不太了解，我尝试调用一个函数，其中 JWT 令牌从本地存储中获取并与后端的令牌进行比较，方法是发送 Axios 请求，以便如果我得到200 响应意味着我可以将其重定向到另一个页面，虽然这是一个错误，但我可以请求用户登录。（请注意，这不是一个专业项目，但我非常需要你们的帮助，伙计们）
我面临的问题是我在购物车按钮中设置 OnClick 的方式是否正确？以及如何修复在将其作为一个类进行维护时出现的 React Hook 错误？ 未处理的拒绝（错误）：无效的挂钩调用。Hooks 只能在函数组件的主体内部调用
import React, { Component } from "react";
import { Link, useHistory } from "react-router-dom";
import axios from "axios";
export default class NavBar extends Component {
// eslint-disable-next-line
constructor(props) {
super(props);
}
async tokenizedCartRedirect() {
var history = useHistory();
var token = localStorage.getItem("currentToken");
if (token != "") {
const config = {
headers: { "Content-Type": "application/json", "x-auth-token": token },
mode: "cors",
};
const body = JSON.stringify(token);
const res = axios
.post("http://localhost:5000/auth", body, config)
.then((res) => {
history.push("/cart");
})
.catch((err) => {
history.push("/login");
});
} else {
history.push("/login");
}
}
render() {
//const element = (<div>Text from Element</div>)
return (
<header id="site-header" className="site-header__v7">
<div className="topbar d-none d-md-block bg-punch-light">
<div className="container">
<div className="topbar__nav d-lg-flex justify-content-between align-items-center font-size-2">
<ul className="topbar__nav--left nav ml-lg-n3 justify-content-center">
<li className="nav-item">
<a href="#" className="nav-link text-dark">
<i className="font-size-3 glph-icon flaticon-question mr-2" />
Can we help you?
</a>
</li>
<li className="nav-item">
<a href="#" className="nav-link text-dark">
<i className="font-size-3 glph-icon flaticon-phone mr-2" />
+1246-345-0695
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="masthead">
<div className="bg-white border-bottom">
<div className="container pt-3 pb-2 pt-lg-5 pb-lg-5">
<div className="d-flex align-items-center position-relative flex-wrap">
<div className="site-branding pr-md-11 mx-auto mx-md-0">
<Link to="/" className="d-block mb-1">
<img
src={require("../../assets/img/logo.png")}
className="img-fluid"
alt="image-description"
width="330px"
/>
</Link>
</div>
<div className="site-search ml-xl-0 ml-md-auto w-r-100 flex-grow-1 mr-md-5 py-2 py-md-0">
<form className="form-inline my-2 my-xl-0">
<div className="input-group w-100">
<input
type="text"
className="form-control border-right-0 px-3"
placeholder="Search for comics by keyword"
aria-label="Amount (to the nearest dollar)"
/>
<div className="input-group-append border-left">
<button
className="btn btn-dark px-3 rounded-0 py-2"
type="submit"
>
<i className="mx-1 glph-icon flaticon-loupe"></i>
</button>
</div>
</div>
</form>
</div>
<ul className="nav align-self-center d-none d-md-flex">
<li className="nav-item">
<a href="#" className="nav-link text-dark">
<i className="glph-icon flaticon-heart font-size-4"></i>
</a>
</li>
<li className="nav-item">
<Link
to="/login"
id="sidebarNavToggler"
role="button"
className="nav-link text-dark"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-overlay='{
"className": "u-sidebar-bg-overlay",
"background": "rgba(0, 0, 0, .7)",
"animationSpeed": 500
}'
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500"
>
<i className="glph-icon flaticon-user font-size-4"></i>
</Link>
</li>
<li className="nav-item">
<dev
id="sidebarNavToggler1"
role="button"
className="nav-link pr-0 text-dark position-relative"
aria-controls="sidebarContent1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent1"
data-unfold-type="css-animation"
data-unfold-overlay='{
"className": "u-sidebar-bg-overlay",
"background": "rgba(0, 0, 0, .7)",
"animationSpeed": 500
}'
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500"
>
<i
className="glph-icon flaticon-icon-126515 font-size-4"
onClick={this.tokenizedCartRedirect()}
></i>
</dev>
</li>
</ul>
</div>
</div>
</div>
<div className="border-bottom py-3 py-md-0">
<div className="container">
<div className="d-md-flex position-relative">
<div className="site-navigation mr-auto d-none d-xl-block">
<ul className="nav">
<li className="nav-item">
<Link
to="/"
className="nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium active border-bottom border-primary border-width-2"
>
Home
</Link>
</li>
<li className="nav-item">
<Link
to="/products"
className="nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium active border-bottom border-primary border-width-2"
>
Browse Comics
</Link>
</li>
</ul>
</div>
<div className="d-none d-md-block ml-md-auto secondary-navigation ">
<ul className="nav">
<li className="nav-item">
<a
href="#"
className="nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium"
>
Subscription Pricing
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
}
解决方案
你不能在类组件中使用钩子
该钩子useHistory永远不会在类中工作，您需要将其移到类外以包装功能组件或将此组件转换为功能组件。
对于一个很好的指南，您应该查看这篇文章，它展示了如何逐步转换它。
如何使用钩子的示例
const MyComp = (props) => {
const history = useHistory();
const tokenizedCartRedirect = async (history) => {/* code */};
return (
<div>
<SomeComponent onClick={() => tokenizedCartRedirect(history)} />
</ div>
)
}
推荐阅读
- unity3d - 用什么来多角度观看视频
- mysql - 在 Ubuntu 18.04 上安装 MySQL 8.0 的问题
- ag-grid - 初始加载后 ag-grid 刷新列过滤器
- json - React-Native JSON 解析错误：意外的标识符“var”
- javascript - 如何修复“AssertionError：预期的错误是真实的”错误？
- javascript - 使用 switch 和 Hooks 返回组件数据
- javascript - 网站延迟加载对讲脚本
- javascript - 如何将动态变量传递给 setInterval 方法
- python - 在 Python 中使用 Queue 对打印机进行实字模拟
- cordova - 无法设置 android studio 模拟器