React JS中API响应数据无法存入activityType变量如何解决

• activityType是定义在组件函数作用域的普通局部变量，不是React可追踪的状态。组件每次重渲染时，const activityType: any = []都会重新执行，数组会被重置为空，之前异步请求push进去的值会直接丢失。
• 异步请求逻辑存在缺陷：tabs.map返回的是一组Promise对象，代码没有等待所有异步请求执行完成，且直接在异步回调里修改普通变量不会触发组件重渲染，组件永远拿不到更新后的值。
• useEffect依赖配置错误：将每次渲染都会生成新引用的普通数组activityType加入依赖数组，会导致useEffect无限触发，组件反复重渲染，进一步导致数组反复被重置为空。

核心修改点有三个：

1. 将activityType改为通过useState声明的响应式状态，让React可以追踪值的变化，值更新后会自动触发组件重渲染，且不会在重渲染时被重置
2. 用Promise.all等待所有tabs对应的接口请求全部返回，拿到按tabs顺序排列的所有结果后，一次性更新状态，避免逐个push带来的顺序错乱、闭包引用旧值问题
3. 清理useEffect的无效依赖，移除activityType避免触发无限重渲染

修复后的完整代码如下：

const tabs = [
  // {value: 'All', label: `${i18n.t('AllActivity')}`},
  {value: 'ActSendGift', label: `${i18n.t('Gifts')}`},
  {value: 'ActSubscribe', label: `${i18n.t('Subscribers')}`},
  {value: 'ActFollow', label: `${i18n.t('Followers')}`},
];

// 替换原普通变量为响应式状态
const [activityType, setActivityType] = useState<boolean[]>([]);

useEffect(() => {
  async function fetchData() {
    // 并发发起所有请求，等待全部返回，结果顺序与tabs顺序完全一致
    const settingValues = await Promise.all(
      tabs.map(async (item) => {
        const response = await Api.user.getSettingValues(item.value);
        return response.settingValue;
      })
    );
    // 统一更新状态
    setActivityType(settingValues);
  }
  fetchData();
  // 移除无效依赖，避免无限循环
}, [activityFeedData.activityList]);

补充说明：原代码中混用async/await和.then链式调用本身不会直接导致报错，但统一使用async/await可以让异步逻辑更清晰，减少不必要的代码嵌套。

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