Question

有谁知道为什么这个 useFetch 钩子没有获取任何东西？ Chrome Devtools 说 beerId 很好，它被传入，它被内部异步函数读取，但根本不发送获取。网络选项卡不显示 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);

useFetch() 自定义钩子未获取

2 个答案: