如何使用反应钩子重新获取 API

Posted 2023-02-27

【中文标题】如何使用反应钩子重新获取 API

【英文标题】：How can I re-fetch an API using react hooks

【发布时间】：2020-06-18 22:45:16

【问题描述】：

开发者，

我决定最终通过我认为是一个简单的项目来学习 React Hooks。我不太清楚。这是我到目前为止的代码。

import React,  useState, useEffect  from "react"
import useFetch from "./utils/getKanya"

const kanye = "https://api.kanye.rest"

const Index = () => 
  let [kanyaQuote, setKanyeQuote] = useState(null)
  let data = useFetch(kanye)

  const getMore = () => 
    setKanyeQuote(useFetch(kanye))
  

  return (
    <>
      <h1>Welcome to Next.js!</h1>
      <p>Here is a random Kanye West quote:</p>
      !data ? <div>Loading...</div> : <p>!kanyaQuote ? data : kanyaQuote</p>
      <button onClick=getMore>Get new quote</button>
    </>
  )


export default Index

我将 kanyeQuote 状态值设为null 我获取初始数据 我要么显示“正在加载...”，要么显示初始报价 我正在尝试设置一个按钮来重新获取 API 并通过 getKanyeQuote (setState) 将数据存储在 kanyeQuote 中

这是我收到的错误Error: Invalid hook call...

如果您能就此提供任何指导，我将不胜感激。

【问题讨论】：

所以错误是can't call hooks in callback?

请添加getKanya文件

github.com/WebRuin/Kanye-/blob/master/pages/utils/getKanya.js

【参考方案1】：

这里的问题是，您只能在组件的根目录中直接使用钩子。 这是第一条“钩子规则”。你可以阅读更多关于here

  const getMore = () => 
    setKanyeQuote(useFetch(kanye) /* This cannot work! */)
  

有几种方法可以解决这个问题。在不知道您的 useFetch-hook 的内部逻辑的情况下，我只能假设您能够更改它。

更改挂钩以在内部处理其状态

解决此问题的一种方法是更改​​自定义 useFetch 挂钩的逻辑，以提供某种形式的函数来获取数据并在内部更新状态。然后它可能看起来像这样：

const  data, doFetch  = useFetch(kanye);
useEffect(() => 
  doFetch(); // initialFetch
, []);

const getMore = () => 
  doFetch();
;

// ...

然后您需要更改 useFetch-hook 的内部逻辑以在内部使用 useState 并公开它的 getter。它看起来像这样：

export const useFetch = (url) => 
  const [data, setData] = useState(null);

  const doFetch = () => 
    // Do your fetch-Logic
    setData(result);
  ;

  return  data, doFetch ;
;

改变钩子根本不处理任何状态。

如果你只想管理加载的数据在父组件中的状态，你可以通过 hook 提供包装好的 fetch 函数；类似的东西：

const doFetch = useFetch(kanye);
const [data, setData] = useState(null);
useEffect(() => 
  setData(doFetch()); // initialFetch
, []);

const getMore = () => 
  setData(doFetch())
;

// ...

然后，您需要将 useFetch-hook 的内部逻辑更改为没有任何内部状态，并且只公开包装的 fetch。它看起来像这样：

export const useFetch = (url) =>   
  const doFetch = () => 
    // Do your fetch-Logic
    return result;
  ;

  return doFetch;
;

【讨论】：

github.com/WebRuin/Kanye-/blob/master/pages/utils/getKanya.js