如何通过React的useEffect钩子实现setState的复杂副作用处理？

本文共计1382个文字，预计阅读时间需要6分钟。

目录+介绍一个API+fetch()方法访问API+setState的副作用+使用useEffect解决这个问题的方法+使用useEffect控制函数执行+介绍一个API+本文字主要内容：描述了setState与fetch之间产生的冲突副作用，并使用u

目录

• 介绍一下API
• fetch()方法访问API
• setState的副作用
• 使用useEffect解决这个问题
• 使用useEffect操控函数运行

介绍一下API

本文主要内容：描述了setState与fetch之间产生的冲突副作用，并使用useEffect进行解决

API，即Application Programming Interface，应用程序接口，是很多程序向开发人员提供的易于使用的抽象化的代码。

比如经常会用到的查询天气API，智能识图API，如果是直接照着复杂的代码编写，会相当不友好。而API则只需按照它们提供的规则即可简单、方便、安全地使用。

fetch()方法访问API

我们会用到一个很简单的资源API，swapi.dev/api/people/1，这是一个会返回星球大战里的人物信息的API。

所以我们要做的事：1、读取API中提供的数据； 2、将获得的数据写入state。