useFetch() 自定义挂钩未获取

Question

有人知道为什么这个useFetch 钩子没有获取任何东西吗？ Chrome Devtools 说 beerId 没问题，它是传入的，它是由内部异步函数读取的，但根本没有发送 fetch。网络选项卡显示没有 API 调用。因此，输出的是一个空对象，不好。我错过了什么？ API 很好，我的其他调用返回响应也很好。干杯。

export const useFetch = (beerId, initialValue) => {
    const [isLoading, setLoading] = useState(false);
    const [data, setData] = useState(initialValue); 
    useEffect(() => {
        async function fetchBeerById() {
            try {
                setLoading(true)
                const res = await fetch(`https://api.punkapi.com/v2/beers/${beerId}`);
                const beer = await res.json();
                setData(beer)
            } catch (err) {
                console.log(err)
            } finally {
                setLoading(false)
            }
        }
        fetchBeerById()
    },[beerId])
    return { data, isLoading}
}  

这是我在应用程序中使用它的方式：

const BeerDetails = () => {
  // get id from URL
  const params = useParams();
  const { beerId } = params;
  debugger
  // fetch that beer, apply local price
  const { data } = useFetch(beerId, {})
  const beer = usePriceBeer(data)
  
  // get the selected data from beer
  const selectBeerData = getSelectedBeerDetails(beer)
  const { name, image_url, abv, ibu, price, tagline, description } = 
  selectBeerData;
 
  return (...render jsx using above vars)
  
}

这是我在 DevTools 中看到的。出于某种原因，fetch 命令是无效的。如果我将鼠标悬停在res 上，则不会弹出任何内容，甚至不会触发 API 调用。事实上，整个useEffect 块只是被跳过了，甚至没有将isLoading 设置回false。

Answer 1

问题可能是初始加载时数据为空，并且您得到一个空对象。

我尝试为它创建一个原型，如果没有数据则返回 null。所以只有在使用 isLoading 退出时才返回数据。

https://codesandbox.io/s/recursing-banzai-b2y0c

确保检查第 26 行和第 40 行

Answer 2

您如何使用自定义挂钩？如果您以这种方式使用它，那么它应该可以按预期工作：

const App = () => {
  const { data, isLoading } = useFetch(10, {});

  if (isLoading) {
    return <h1>Loading...</h1>;
  }

  return <p>{JSON.stringify(data, null, 2)}</p>;
};

export default App;

顺便说一下，从您的 API 返回的响应是一个数组而不是一个对象，您可以根据需要将其更改为返回单个对象：

const [beer] = await res.json();
setData(beer);