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
2、安装并启动json服务
notion image

创建相关组件

 
App.js 主运行窗口
 
Home.js 首页组件,显示博客列表程序
Navbar.js 导航栏组件
 
Bloglist.js 博客列表展示组件
useFetch.js 定义的数据获取接口,里面包含了错误和异常处理,以及abort 处理,暂时这个还不熟悉。
index.css 文件
 

展示效果

notion image
 

© robotbird 2023 - 2024  浙ICP备2020035677号-2