反應高階 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) => {
    .......
  };
}