如何使用 React Hooks 获取数据

在本教程中，我们将学习 React 的新功能“Hooks”。其实，我已经写了很多关于 React Hooks 的教程，但在本篇实用文章中，我们将学习如何使用这个很棒的 React 功能异步发送 HTTP 请求。

入门

首先，您显然需要一个 React 应用程序！

如果您还没有，您可以通过运行下面的命令轻松使用create-react-app 。

$ npx create-react-app <YOUR_APP_NAME>

或者，我已经发布了整个项目的源代码。请从我的 GitHub 克隆此仓库。

$ git clone https://github.com/rahmanfadhil/react-hook-fetch

组件加载后获取

在您想要获取数据的组件内，您需要添加一个useEffect钩子。

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    // Fetch data right here!
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

注意，我在第二个参数中放置了一个空数组。默认情况下，useEffect每当组件状态发生变化时，都会调用这个函数。在这个特定的场景中，我们希望这段代码只运行一次。因此，这个空数组告诉我们，useEffect只有当组件渲染到屏幕上时才运行这段代码。

然后，我们需要使用 API 来获取数据fetch。您可以使用任何 HTTP 客户端，但在这里，我只想简化操作。

在这个例子中，我们将使用JSONPlaceholder，这是一个模拟 REST API，允许我们测试前端应用程序。它是开源的，易于使用，并且已经附带了大量资源。

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

现在我们尝试从我们的虚假 API 中获取帖子数据，将 JSON 响应转换为 JavaScript 对象，现在，我们只需将最终结果打印到我们的控制台中。

打开控制台选项卡，您可以看到我们刚刚从 API 中获取的一堆虚假帖子。

这是一个好的开始！

获取结果状态

成功获取数据后，我们需要将其存储在组件中的某个位置，以便将结果显示到屏幕上。组件状态是最佳存储位置。

要使用 Hooks 设置组件的状态，我们可以使用React 中的 hook。您可以在这里useState阅读更多相关信息。

import React, { useEffect, setState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([]) // new

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

因为我们获取的帖子是一个数组，所以我们可以将状态的默认值定义为空数组。

太棒了！现在我们可以使用该函数存储刚刚获取的帖子setPosts。

import React, { useEffect, useState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data) // new
      })
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

然后，我们要做的最后一件事就是将数据显示到屏幕上。我们可以循环遍历我们的 posts 数组，并用 HTML 列表显示每一项。

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.map(item => (
        <li>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </li>
      ))}
    </div>
  )
}

我们还可以在列表中添加一个占位符，以便用户看到加载栏或其他内容，而不仅仅是空白屏幕。

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

自定义钩子

我们已成功获取数据并将其显示到浏览器中。

但在这里，我只想向你展示如何改进我们刚刚编写的代码。到目前为止，我们将所有代码都放在一个组件中，这种方法不可复用，因为如果我们想在应用程序中某个其他组件中执行相同的操作，就需要一遍又一遍地重写这段代码。或者更好的方法是复制粘贴……🤣

因此，为了防止这种情况，我们可以创建一个自定义钩子，可以在我们想要获取相同数据的组件中使用它。

function usePosts() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data)
      })
  }, [])

  return posts
}

自定义钩子只是一个包含 React 提供的钩子的普通 JavaScript 函数。因此，我们唯一需要做的就是将Example组件逻辑提取到可复用的函数中。

最后，我们可以在组件usePosts内部使用这个钩子Example来获取当前的帖子数据。

import React, { useEffect, useState } from "react"

// ...

export default function Example() {
  const posts = usePosts() // new

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

现在，您的应用程序的工作方式与以前相同，但代码更加清晰、易读。

快速说明

如果您想使用 React Hooks 获得更高级的数据获取功能，请考虑使用SWR。这是一个由 zeit 开发的非常棒的 React Hooks 数据获取库。它还提供了一些额外的功能，例如加载状态、错误捕获、自定义获取器，甚至React Suspense集成！

鏂囩珷鏉ユ簮锛�https://dev.to/rahmanfadhil/how-to-fetch-data-with-react-hooks-40i