React003 useEffect
tags
React.js
type
Post
date
Nov 5, 2023
status
Published
本篇文章通过一个博客示例代码展示通过useEffect fetch远程数据获取并展示在博客列表,该博客组件一开始包含Home,Navbar,Bloglist组件
创建本地json服务
1、在根目录创建data/db.json文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2F68d2280d-d194-4b72-a633-49df43b8e346%2FUntitled.png?table=block&id=c74d6f35-7e86-4de0-b844-da8f600ba114&cache=v2)
2、安装并启动json服务
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2F835ce49d-3bf0-4400-a724-e8d804b7ceb0%2FUntitled.png?table=block&id=ebe80ec0-f53d-4797-b189-143b7f95828d&cache=v2)
创建相关组件
App.js 主运行窗口
Home.js 首页组件,显示博客列表程序
Navbar.js 导航栏组件
Bloglist.js 博客列表展示组件
useFetch.js 定义的数据获取接口,里面包含了错误和异常处理,以及abort 处理,暂时这个还不熟悉。
index.css 文件
展示效果
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2F8fb5ef77-aeda-442a-aa9a-aa5a92092c79%2FUntitled.png?table=block&id=14b8840d-cf80-4a3f-a282-7515f15873c5&cache=v2)