26.详情页面异步获取数据

最新推荐文章于 2022-09-21 00:00:46 发布

zhuhui2000

最新推荐文章于 2022-09-21 00:00:46 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

分类专栏：简书项目

本文链接：https://blog.youkuaiyun.com/zhuhui2000/article/details/91945923

这篇博客介绍了如何在实际开发中模拟从后端获取数据。通过在public文件夹下创建JSON文件来模拟数据源，然后在组件的componentDidMount生命周期中使用Ajax进行异步请求，接收并处理数据。在actionCreators中定义getDetail函数，从JSON文件获取数据并更新state。同时在reducer中处理action，用获取到的title和content替换默认值，实现了详情页面数据的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.我们实际开发中，数据都是从后端获取的，并且可以更改数据，我们这里再public文件下新建一个json文件，用来模拟我们实际开发中从后端获取的数据，并且我们通过ajax获取异步请求
在这里插入图片描述
2.在detail文件中，我们存放数据

{
    "success":true,
    "data":{
         "title":"一树花开",
         "content":"<p>花色太过浓郁<br /><br />我惹了一身的花香<br /><br />是怪风多情<br /><br />还是我的途径</p> <p>夏天的蝉<br /><br />吵醒了我的梦<br /><br />我以为冰激凌<br /><br />快化了<br /><br />谁知早就被猫<br /><br />吃了个精光</p>"
        }

}

3.然后在detail文件下的index中，我们使用componentDidMount生命周期函数接收异步数据，这里主要通过getDtail接收
在这里插入图片描述 4.在index文件中，我们派发请求getDetail
5.在actionCreators中，我们需要创建getDetail,并使用getde