react hooks useEffect 取消 promise

cancel promise

清除的 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]);