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 发布文章使用：只允许注册用户才可以访问！

---