反应高阶 function 返回钩子

Question

目前，我有一个用 javascript 编写的自定义获取数据钩子，它可以工作

import {useState, useEffect} from 'react';

const useApi = apiName => id => {
  const [response, setResponse] = useState();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const fetching = async () => {
    setLoading(true);
    const data = await fetch(`/api/${apiName}${id ? `/${id}` : ""}`)
      .then((x) => x.json())
      .catch((error) => setError(error));

    setResponse(data);
    setLoading(false);
  };

  useEffect(() => {
    fetching();
  }, [id]);

  return { response, loading, error };
};

然后我可以使用传递我想调用的 api 来获取钩子。 举些例子：

const useCustomer = useApi("customer")
const useHello = useApi("hello")
.....
const {response, loading, error} = useCustomer("id_1")

它工作正常。

然后，我尝试转换为 typescript

const useApi = (apiName:string) => (id?:string) => {
  const [response, setResponse] = useState({})
.......
}

和 eslint 抱怨说

React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

我想知道这种方法有什么问题，我知道我可以有类似的东西：

const useApi = (apiName:string, id?:string) => {} 

或禁用 eslint(react-hooks/rules-of-hooks)

但只是好奇钩子的高阶 function 的潜在问题是什么，因为它实际上返回了响应。

谢谢

Answer 1

当你用prefix钩子命名你的 function 时，eslint 认为它是根据一般约定的自定义钩子。 现在在嵌套的 function 中实现 useState 这就是为什么它会给你一个错误

编写上述代码的最佳方法是不使用柯里化 function 而是直接将 apiName 作为参数传入

const useApi = (apiName, id) => {
  const [response, setResponse] = useState();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const fetching = async () => {
    setLoading(true);
    const data = await fetch(`/api/${apiName}${id ? `/${id}` : ""}`)
      .then((x) => x.json())
      .catch((error) => setError(error));

    setResponse(data);
    setLoading(false);
  };

  useEffect(() => {
    fetching();
  }, [id]);

  return { response, loading, error };
};

并像使用它一样

......

const {response, loading, error} = useApi("customer","id_1");

PS Hooks 旨在作为 HOC 的替代品，如果您将其用作 HOC 本身，则没有必要编写钩子

Answer 2

如果您不需要将 id 变量置于挂钩中，则有一种更简单的方法。 您收到警告的原因是因为您的钩子在您的 CB 中，而不是您的根 function。

正确示例：

const useApi = (apiName:string) => {
  const [response, setResponse] = useState({});

  return (id?: string) => {
    .......
  };
}