V2EX 前天 08:58
[问与答] 提问一个 React 的问题
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文讨论了在不同场景下使用useEffect进行fetch请求的写法选择,分析了两种写法的优缺点,并分享了个人的偏好和团队遇到的问题。

像是 fetch 这种请求,需要根据某个 state 变化重新请求,例如 pageSize ,大家一般用以下哪种写法(或者自己有更好的也可说一下):

useEffect:

useEffect(() => { fetch(`xxx?pageSize=${pageSize}`)}, [pageSize])

在 state 发生变化的组件调用 fetch:

<Pagination  pageSize={pageSize}  onChange={(pageSize) => {    fetch(`xxx?pageSize=${pageSize}`)  }}/>

我个人更倾向第二种,第一种 useEffect 看上去更方便,不用第二种需要在每个 state 变化的组件调用 fetch ,但是长期维护下来可能会有意想不到的 bug (公司里有个项目因为缓存的 code 和后端返回的 code 不同,导致 useEffect 调用了两边,自己 dev 环境下 mock 很难察觉)

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

useEffect fetch请求 状态更新 组件维护 bug处理
相关文章