无效钩子呼叫。钩子只能在里面叫..。如何修复这个维护react类组件

Question

我是一个反应初学者，所以我不太了解，我试图调用一个函数，其中JWT令牌是从Local获取的，并通过发送一个Axios请求与后端的JWT令牌进行比较，这样如果我得到一个200个响应，就意味着我可以将它重定向到另一个页面，虽然这是一个错误，但我可以请求用户登录。(请注意，这不是一个专业的项目，但我非常需要你们的帮助，伙计们)

我面临的问题是，我在购物车按钮中设置OnClick的方式是正确的吗？以及如何修复作为类维护时出现的Rejection错误？未处理的拒绝(错误)：无效的钩子调用。只能在函数组件的主体内调用钩子。

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>
    );
  }
}

Answer 1

不能在类组件中使用钩子。

钩子useHistory永远不会在类中工作，您需要将它从类移到包装功能组件，或者将该组件转换为功能组件。

为了获得一个很好的指南，您应该查看这个文章，它展示了如何逐步转换它。

如何使用钩子的示例

const MyComp = (props) => {
  const history = useHistory();

  const tokenizedCartRedirect = async (history) => {/* code */};

  return (
    <div>
      <SomeComponent onClick={() => tokenizedCartRedirect(history)} />
    </ div>
  )
}

Answer 2

函数组件是在React中创建组件的另一种方式，而不是类。

如下所示：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

您可以在这里有一个好主意：https://reactjs.org/docs/hooks-state.html