react hooks useEffect 取消 promise
react hooks useEffect 取消 promise
cancel promise
https://github.com/facebook/react/issues/15006#issuecomment-543059930
https://react.docschina.org/docs/hooks-effect.html#需要清除的-effect
https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
清除的 effect & 取消订阅 & 取消 promise
bug
OK
const { adcode, regions = [] } = regionData;
const [regionName, setRegionName] = useState('全国');
const [tableData, setTableData] = useState(regions);
useEffect(() => {
let isSubscribed = true;
// getRegionName(adcode).then(setRegionName);
getRegionName(adcode).then(() => {
if(isSubscribed) {
return setRegionName;
}}
);
// 添加name字段
const promises = [];
regions.forEach(item => {
promises.push(
getRegionName(item.code)
.then(name => {item.name = name;})
// eslint-disable-next-line no-console
.catch(() => console.log('获取%s地名失败', item.code)),
);
});
// 后端传来部分区划代码是错误的,找不到对应地名,暂时先剔除
Promise
.all(promises)
.then(() => {
if(isSubscribed) {
return setTableData(regions.filter(({ name }) => !!name));
}
});
return () => isSubscribed = false;
}, [adcode, regionData, regions]);
https://juliangaramendy.dev/use-promise-subscription/
https://segmentfault.com/a/1190000018652589#articleHeader7
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
react hooks useEffect 取消 promise的更多相关文章
- React Hooks: useEffect All In One
React Hooks: useEffect All In One useEffect https://reactjs.org/docs/hooks-effect.html https://react ...
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...
- React Hooks --- useState 和 useEffect
首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...
- react hooks & component will unmount & useEffect & clear up
react hooks & component will unmount & useEffect & clear up useEffect & return === u ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
随机推荐
- 【题解】洛谷P3119 Grass Cownoisseur G
题面:洛谷P3119 Grass Cownoisseur G 本人最近在熟悉Tarjan的题,刷了几道蓝题后,我飘了 趾高气扬地点开这道紫题,我一瞅: 哎呦!这不是分层图吗? 突然就更飘了~~~ 用时 ...
- 反射型XSS
反射型XSS漏洞详解 http://www.ttlsa.com/safe/xss-description/ 一.原理 如果一个应用程序使用动态页面向用户显示错误消息,就会造成一种常见的XSS漏洞.通常 ...
- 最简单直接地理解Java软件设计原则之单一职责原则
理论性知识 定义 单一职责原则, Single responsibility principle (SRP): 一个类,接口,方法只负责一项职责: 不要存在多余一个导致类变更的原因: 优点 降低类的复 ...
- 截止9月20日,xx行动中已知漏洞
VMware Fusion cve-2020-3980权限提升 Apache Cocoon security vulnerability cve-2020-11991 Spring框架RFD(文件下载 ...
- Python开发桌面微型计算器
开发Windows窗口需要用到tkinter库 所以上来的第一件事就是: import tkinter as t window = t.Tk()#创建了一个窗口 window.title('微型计算器 ...
- Redis挖矿原理及防范
笔者也曾经被挖矿病毒侵袭过,灰常难受,但是其实你只要了解入侵的手段就非常好防范了,今天我们就演示一下如果通过Redis进行提权获取远程服务器的Root用户. 1.首先我们需要一些先决条件 条件一:你首 ...
- docker(4)解决pull镜像速度缓慢
前言 上一篇讲到pull 镜像,但是pull镜像的时候下拉的速度实在感人,有什么解决办法吗?我们只需将docker镜像源修改为国内的 将docker镜像源修改为国内的: 在 /etc/docker/d ...
- 【uva 10600】ACM Contest and Blackout(图论--次小生成树 模版题)
题意:有T组数据,N个点,M条边,每条边有一定的花费.问最小生成树和次小生成树的权值. 解法:具体请见 关于生成树的拓展 {附[转]最小瓶颈路与次小生成树}(图论--生成树) 1 #include&l ...
- P1541 乌龟棋(DP)
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行NNN个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第NNN格是终点,游戏要求玩家控制一个乌龟 ...
- 哈希算法解决:HDU1686 && POJ2774 && POJ3261
HDU1686 题意: 找A串在B串中的出现次数(可重叠),可用KMP做,这里只提供哈希算法做的方法 题解: 先得到A串的hash值,然后在B中枚举起点,长度为lena的子串,检验hash值是否相同就 ...