如何使用 useEffect 获取数据 - Javascript

在 React 中，有时需要从远程服务器获取数据，并在页面上展示这些数据。为了实现这一功能，通常需要使用 useEffect 钩子函数。本文将介绍如何使用 useEffect 获取数据，并展示数据。

准备工作

在开始之前，需要先安装 axios 这个网络请求库。可以使用 npm 进行安装：

npm install --save axios

使用 useEffect 获取数据

首先，在组件中导入 useEffect 和 useState：

import React, { useEffect, useState } from 'react';

然后，创建一个函数组件，并使用 useState 定义一个状态：

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // 在这里执行获取数据的代码
  }, []);
  
  // 在这里展示数据，比如使用 JSX 来渲染数据
  return (
    <div>
      // 使用 JSX 展示数据
    </div>
  );
}

现在，需要在 useEffect 中执行获取数据的代码。可以使用 axios 发送 GET 请求来获取数据。在获取数据成功后，需要使用 setData 更新状态，从而触发重新渲染：

useEffect(() => {
  axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.log(error));
}, []);

这里使用了 axios.get() 方法发送 GET 请求，并将返回的数据保存到状态中。使用空数组作为 useEffect 的依赖项，表示只在组件挂载时执行此代码一次。

展示数据

现在已经获取了数据并将其保存到了状态中，接下来需要将数据展示在页面上。可以使用 JSX 来渲染数据：

return (
  <div>
    {data ?
      data.map(item => (
        <div key={item.id}>
          {item.title}
        </div>
      ))
      :
      <div>Loading...</div>
    }
  </div>
);

这里使用了三元表达式来判断是否已经获取到了数据。如果已经获取到了数据，就使用 .map() 方法来遍历数据，并使用 JSX 渲染每一个数据项。如果没有获取到数据，则显示 Loading...。

完整代码

下面是完整的代码片段：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {data ?
        data.map(item => (
          <div key={item.id}>
            {item.title}
          </div>
        ))
        :
        <div>Loading...</div>
      }
    </div>
  );
}

export default App;

结论

通过使用 useEffect，可以轻松地从远程服务器获取数据，并将其展示在页面上。使用 useState 来定义状态，可以在获取数据之后触发重新渲染。最后，使用 JSX 来将数据渲染到页面上。