JavaScript/React如何获取async函数内for-in循环中的变量供外部访问

现有代码问题 #

• 循环内部提前return，只会统计第一个匹配项就终止，无法完成全量计数
• async函数为异步执行，无法同步获取内部计算的变量值

实现方案（React原生最常用方式） #

通过React state存储统计结果，组件全范围可访问，同时支持响应式渲染：

1. 组件顶层声明state变量

import { useState, useEffect } from 'react'

// 组件内部顶层作用域添加
const [profileCount, setProfileCount] = useState(0)

2. 修改useEffect内逻辑，接收异步函数返回值并存入state

useEffect(() => {
  async function getProfiles() {
    try {
      const url = '';

      let h = new Headers();
      h.append('Accept', 'application/json');

      let encoded = window.btoa('superuser:superuser');
      let auth = 'Basic ' + encoded;

      h.append('Authorization', auth);

      const response = await fetch(url, {
        method: 'GET',
        mode: 'cors',
        headers: h,
        credentials: 'same-origin',
      });
      const data = await response.json();

      let results = data.results;
      let profileCount = 0;

      for (let key in results) {
        let innerObject = results[key];
        for (let newKey in innerObject) {
          if (innerObject[newKey].indexOf('pages/ProfilePage') > -1) {
            profileCount += 1;
          }
        }
      }
      return profileCount;
    } catch (err) {
      console.log('test' + err);
      return 0;
    }
  }
  getProfiles().then(count => {
    setProfileCount(count)
    // 此处可直接对count做其他业务处理
  })
}, []);

其他使用场景 #

如果不需要统计值触发组件重新渲染，可以用useRef存储：

// 顶层声明
const profileCountRef = useRef(0)
// 赋值
profileCountRef.current = count
// 外部访问
console.log(profileCountRef.current)

内容的提问来源于stack exchange，提问作者Pazulay