时间戳

首页 > 解决方案 > 在 useEffect 中使用自定义挂钩

reactjs - 在 useEffect 中使用自定义挂钩

问题描述

我正在尝试使用自定义 Axios 挂钩来获取一些数据，但我收到一条错误消息，提示“无效的挂钩调用。钩子只能在函数组件的主体内调用。我知道这听起来很明显，但对于一个新手来说，这没有多大意义。

这是钩子：

import { useState } from "react";
import axios from "axios";

export default useApi = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const request = async () => {
    const source = axios.CancelToken.source();
    setLoading(true);

    try {
      const response = await axios.get(url, { cancelToken: source.token });
      setData(response.data);
      setLoading(false);
    } catch (error) {
      if (axios.isCancel(error)) {
        // don't update state in case component is dismounting
        console.log("cancelled");
      } else {
        setLoading(false);
        setError(error);
      }
    }

    return () => {
      source.cancel();
    };
  };

  return { data, error, loading, request };
};

我希望能够像返回一样使用数据、错误、加载和请求，所以我尝试使用解构。

import React, { useEffect } from "react";
import useApi from "../hooks/http-hook";
const { request, data, error, loading } = useApi();


const SomeComponent = (props) => {

    useEffect(() => {
      const getUsers = async () => {
        try {
          const res = await request("http://localhost:8000/api/users");
          console.log(res);
        } catch (err) {
          console.log(err);
        }
      };
      getUsers();
    }, [request]);
}

export default SomeComponent;

标签： reactjsreact-hooks

解决方案

你必须在组件中使用你的钩子。

我看到您正试图在导入之后调用它，我想这在任何类型的组件之外。尝试类似的东西

import useApi from "../hooks/http-hook";

const YourComponent = () => {
    const { request, data, error, loading } = useApi();
    console.log(request, data, error, loading);
    return <Stuff/>
}

推荐阅读