Soy un principiante de reacción, así que no sé mucho, traté de invocar una función donde el token JWT se toma del almacenamiento local y se compara con el del backend, enviando una solicitud de Axios para que si obtengo una respuesta 200 significa que puedo redirigirlo a otra página, y aunque es un error, puedo solicitar al usuario que inicie sesión. (tenga en cuenta que este no es un proyecto profesional, pero necesito mucho su ayuda, muchachos)
El problema al que me enfrento es que la forma en que configuro el botón OnClick en el carrito es correcta. y ¿cómo puedo solucionar el error React Hook que viene mientras mantengo esto como una clase? Rechazo no controlado (error): llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función
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>
);
}
}
El gancho useHistorynunca funcionará en una clase, debe moverlo fuera de la clase a un componente funcional envolvente o convertir este componente en un componente funcional.
Para obtener una buena guía, debe consultar este artículo , que muestra cómo convertirlo paso a paso.
const MyComp = (props) => {
const history = useHistory();
const tokenizedCartRedirect = async (history) => {/* code */};
return (
<div>
<SomeComponent onClick={() => tokenizedCartRedirect(history)} />
</ div>
)
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras