# 15 React 使用useEffect获取网络数据

要在React中实现这些功能,你可以按照以下步骤进行操作:

  1. 安装json-server模拟接口服务
bash 复制代码
npm install -g json-server

db.json

json 复制代码
{
  "users": [
    { "id": 1, "name": "John", "age": 30 },
    { "id": 2, "name": "Jane", "age": 25 },
    { "id": 3, "name": "Bob", "age": 35 }
  ]
}

在你的项目目录中创建一个JSON文件,比如db.json,用来模拟你的API数据。然后使用json-server启动服务器:

bash 复制代码
json-server --watch db.json --port 3001

这将在本地3001端口启动一个模拟的API服务,你可以通过 http://localhost:3001 访问你的API数据。

  1. 使用axios进行API请求

安装axios:

bash 复制代码
npm install axios

在React组件中使用axios来进行API请求。例如:

js 复制代码
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:3001/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // 空数组作为依赖表示只在组件挂载时执行一次

  return (
    <div>
      <h1>Data from API:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
  1. 在React中使用它们

在React组件中结合使用json-server和axios,从模拟的API服务获取数据并展示在页面上。在示例中,我们创建了一个React函数组件MyComponent,它使用axios从http://localhost:3001/data获取数据,并将其渲染到页面上。

需要注意的知识点:

  • useEffect钩子 :用于在函数组件中执行副作用操作,比如数据获取。在上面的例子中,我们使用了useEffect来确保数据只在组件挂载时获取一次。

  • useState钩子 :用于在函数组件中使用状态。在上面的例子中,我们使用useState来存储从API获取的数据。

  • axios库:用于发送HTTP请求。在上面的例子中,我们使用axios来从模拟的API服务获取数据。

  • JSON Server:用于在本地创建模拟的RESTful API。我们使用json-server来创建一个本地服务器,以模拟一个真实的后端API服务。

相关推荐
冴羽yayujs1 分钟前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
uhakadotcom27 分钟前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
uhakadotcom39 分钟前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
weixin_4578858244 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
慕斯策划一场流浪1 小时前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
梅子酱~2 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友2 小时前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam2 小时前
OpenLayers:如何控制Overlay的层级?
前端·javascript
z_mazin3 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫