React组件中异步数据获取与状态更新：解决数据不渲染问题

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

React组件中异步数据获取与状态更新：解决数据不渲染问题

2025-11-23

浏览次数：次

返回列表

React组件中异步数据获取与状态更新：解决数据不渲染问题

本教程旨在解决react组件中异步获取数据后，ui不更新的问题。核心在于理解react的状态管理机制：组件仅在state或props改变时重新渲染。文章将详细阐述如何通过usestate正确管理异步获取的数据，优化数据结构（如使用对象数组存储api响应），以及确保所有异步操作完成后再更新状态，从而实现数据的正确渲染。

理解React组件的渲染机制

在React应用中，组件的UI更新（即重新渲染）主要由两种情况触发：其state发生变化，或者其props发生变化。如果组件内部的数据在没有通过useState或useReducer等Hook进行状态管理的情况下直接修改，React将不会感知到这些变化，因此组件也不会重新渲染，导致UI无法显示最新数据。

原始代码分析与问题诊断

原始代码尝试从API获取池数据，计算出APY最高的特色池，并将其标题显示在组件中。尽管数据在控制台成功打印，但UI却未能更新。这主要源于以下几个问题：

局部变量未触发重新渲染：poolDetails被定义为一个普通的局部变量（let poolDetails: PoolInfo | undefined;）。在useEffect回调中对其赋值，并不会通知React组件需要重新渲染。React组件只关注由useState管理的状态变量。
poolsArray数据结构不当：初始将poolsArray定义为一个空对象（let poolsArray = {};），并尝试使用poolsArray[pool.targetedAPYId] = result;进行赋值。虽然这在J*aScript中是合法的，但当需要遍历或按特定结构更新数组中的对象时，使用数组（如[{ targetedAPYId: 'id1', apyReward: 'value1' }]）会更清晰和易于管理。
异步操作中的数据更新：在fetch的then块中，poolsArray的更新方式不符合其作为数组的预期，且在多个异步请求并发时，对同一个poolsArray的修改可能存在竞态条件，尽管在这个特定场景下，counter机制在一定程度上缓解了。
@ts-ignore的滥用：@ts-ignore应谨慎使用，它会抑制TypeScript的类型检查。在代码中频繁出现，表明数据类型或逻辑可能存在潜在问题。

解决方案与代码重构

为了解决上述问题并确保数据正确渲染，我们需要对代码进行以下关键修改：

1. 使用useState管理特色池数据

最核心的改变是将poolDetails转换为一个状态变量。这样，当setFeaturedPool被调用时，React会知道FeaturedPool组件的状态已更新，并触发重新渲染。

const [featuredPool, setFeaturedPool] = useState<PoolInfo | undefined>(undefined);

2. 优化数据存储结构poolsArray

将poolsArray定义为一个数组，其中每个元素都是一个包含targetedAPYId和apyReward的对象。这使得数据结构更清晰，也方便后续的查找和更新。

type PoolData = {
  targetedAPYId: string;
  apyReward: string;
};
// ...
let poolsArray: PoolData[] = [];

在遍历初始池数据时，将每个池的骨架添加到poolsArray中：

POOLS?.filter((x) => x.stableCoins)?.forEach((pool) => {
  poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });
  // ... fetch logic
});

3. 正确更新poolsArray中的数据

当每个API请求返回结果后，需要找到poolsArray中对应的项并更新其apyReward。使用forEach遍历并匹配targetedAPYId是有效的方法。

.then((res) => {
  const result = res.data.at(-1).apyReward.toFixed(2);
  poolsArray.forEach((poolItem) => {
    if (poolItem.targetedAPYId === pool.targetedAPYId) {
      poolItem.apyReward = result;
    }
  });
  // ...
});

4. 确保所有API调用完成

通过counter变量来追踪已完成的API请求数量，当所有预期的请求都完成后，再进行最终的特色池计算和状态更新。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

counter++;
if (counter === 3) { // 使用严格相等运算符 ===
  const arr = poolsArray.map((poolItem) => poolItem.apyReward);
  const max = Math.max(...arr);
  const poolKey = poolsArray.find((poolItem) => poolItem.apyReward === max)?.targetedAPYId;

  if (poolKey) {
    const foundPool = POOLS.find((pool) => pool.targetedAPYId === poolKey);
    setFeaturedPool(foundPool); // 更新状态变量
  }
  setLoading(false); // 停止加载
}

5. TypeScript类型安全与@ts-ignore

尽量减少@ts-ignore的使用，通过定义清晰的类型（如PoolData和PoolInfo）来增强代码的可读性和可维护性。在必要时，使用// @ts-ignore而不是// ts-ignore。

完整重构代码示例

以下是根据上述修正后的FeaturedPool组件代码：

import React, { useEffect, useState } from 'react';

// 假设 POOLS 变量和 Token 类型在其他地方定义或导入
// declare const POOLS: PoolInfo[];
// type Token = any; // 根据实际情况定义

export type PoolData = {
  targetedAPYId: string | undefined; // targetedAPYId 可能为 undefined
  apyReward: string;
};

export type PoolInfo = {
  id: string;
  title: string;
  description: string;
  icon: string;
  score: number;
  risk: string;
  apyRange: string;
  targetedAPYId?: string; // 标记为可选
  targetedAPY: string;
  tvlId?: string;
  strategy: string;
  vaultAddress: string;
  strategyAddress: string;
  zapAddress: string;
  isRetired?: boolean;
  stableCoins?: boolean;
  wantToken: string;
  isOld?: boolean;
  details?: string;
  benefits?: string[];
  promptTokens?: any[]; // 根据实际情况定义 Token 类型
};

// 假设 POOLS 是一个全局变量或从某个文件导入
// 为了示例运行，这里提供一个简化的 POOLS 模拟数据
const POOLS: PoolInfo[] = [
  { id: '1', title: 'Vault A', description: '', icon: '', score: 0, risk: '', apyRange: '', targetedAPY: '', strategy: '', vaultAddress: '', strategyAddress: '', zapAddress: '', stableCoins: true, targetedAPYId: 'pool1' },
  { id: '2', title: 'Vault B', description: '', icon: '', score: 0, risk: '', apyRange: '', targetedAPY: '', strategy: '', vaultAddress: '', strategyAddress: '', zapAddress: '', stableCoins: true, targetedAPYId: 'pool2' },
  { id: '3', title: 'Vault C', description: '', icon: '', score: 0, risk: '', apyRange: '', targetedAPY: '', strategy: '', vaultAddress: '', strategyAddress: '', zapAddress: '', stableCoins: true, targetedAPYId: 'pool3' },
  { id: '4', title: 'Vault D', description: '', icon: '', score: 0, risk: '', apyRange: '', targetedAPY: '', strategy: '', vaultAddress: '', strategyAddress: '', zapAddress: '', stableCoins: false, targetedAPYId: 'pool4' },
];


export const FeaturedPool = () => {
  const [loading, setLoading] = useState(true);
  const [featuredPool, setFeaturedPool] = useState<PoolInfo | undefined>(undefined);

  useEffect(() => {
    let counter = 0;
    // 确保 poolsArray 是一个数组，并且包含 targetedAPYId 和 apyReward 字段
    let poolsArray: PoolData[] = [];

    const stablePools = POOLS?.filter((x) => x.stableCoins);
    const totalPoolsToFetch = stablePools?.length || 0;

    if (totalPoolsToFetch === 0) {
      setLoading(false);
      return;
    }

    stablePools?.forEach((pool) => {
      // 检查 targetedAPYId 是否存在
      if (!pool.targetedAPYId) {
        console.warn(`Pool ${pool.id} is missing targetedAPYId.`);
        counter++; // 仍然计数，避免阻塞
        if (counter === totalPoolsToFetch) {
          // 如果所有池都处理完毕，但没有有效数据，也停止加载
          setLoading(false);
        }
        return;
      }

      poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });

      fetch("https://yields.llama.fi/chart/" + pool.targetedAPYId)
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json();
        })
        .then((res) => {
          // 确保 res.data 存在且有数据
          if (res.data && res.data.length > 0) {
            const result = res.data.at(-1).apyReward.toFixed(2);
            poolsArray.forEach((poolItem) => {
              if (poolItem.targetedAPYId === pool.targetedAPYId) {
                poolItem.apyReward = result;
              }
            });
          } else {
            console.warn(`No data found for targetedAPYId: ${pool.targetedAPYId}`);
          }
        })
        .catch((error) => {
          console.error(`Error fetching data for ${pool.targetedAPYId}:`, error);
          // 在错误发生时，也可以将对应的 apyReward 设为 '0' 或其他默认值
          poolsArray.forEach((poolItem) => {
            if (poolItem.targetedAPYId === pool.targetedAPYId) {
              poolItem.apyReward = '0.00'; // 默认值，避免 NaN
            }
          });
        })
        .finally(() => {
          counter++;
          if (counter === totalPoolsToFetch) { // 比较已完成请求数与总请求数
            // 过滤掉没有有效APY数据的池，或者将 '0.00' 转换为数字进行比较
            const validPools = poolsArray.filter(p => parseFloat(p.apyReward) > 0);

            if (validPools.length > 0) {
              const arr = validPools.map((poolItem) => parseFloat(poolItem.apyReward));
              const maxApy = Math.max(...arr);
              // 找到具有最高 APY 的池的 targetedAPYId
              const poolKey = validPools.find((poolItem) => parseFloat(poolItem.apyReward) === maxApy)?.targetedAPYId;

              if (poolKey) {
                const foundPool = POOLS.find((p) => p.targetedAPYId === poolKey);
                setFeaturedPool(foundPool);
              }
            } else {
              console.log("No valid pools with APY data found.");
            }
            setLoading(false);
          }
        });
    });
  }, []); // 依赖项为空数组，表示只在组件挂载时运行一次

  return (
    <>
      {loading ? Loading...
 : Loaded {featuredPool?.title}}
    
  );
};

注意事项：

在POOLS数组定义中，targetedAPYId可能为undefined，请确保在访问它之前进行空值检查，或将其类型定义为string | undefined。
原始代码中的if (counter == 3)硬编码了请求数量。在重构后的代码中，我改用totalPoolsToFetch来动态确定需要等待的请求数量，这使得代码更具通用性。
添加了基本的错误处理和数据存在性检查，例如response.ok和res.data。
在计算maxApy时，将apyReward从字符串转换为浮点数（parseFloat）是必要的，以确保正确的数值比较。

关键知识点与最佳实践

状态是组件更新的驱动力：在React中，任何需要影响UI显示的数据都应该作为组件的状态进行管理。局部变量的修改不会触发组件的重新渲染。
选择合适的数据结构：根据数据的特性和操作需求选择最佳的数据结构。对于一组具有相同结构的对象，数组（Array
异步操作的同步处理：当有多个并发的异步操作时，需要一种机制来判断所有操作是否都已完成，例如使用计数器、Promise.all等。
TypeScript的最佳实践：
- 定义清晰的类型接口（interface或type）来描述数据结构。
- 尽可能避免使用@ts-ignore，它会削弱TypeScript的类型检查优势。如果遇到类型错误，应优先修正类型定义或代码逻辑。
- 在访问可能为undefined或null的属性时，使用可选链操作符（?.）和空值合并运算符（??）进行安全访问。
错误处理：在进行网络请求时，务必添加错误处理机制（try...catch或.catch()），以提高应用的健壮性。
数据类型转换：在进行数值比较或计算之前，确保数据类型是正确的（例如，将字符串表示的数字转换为实际的数字类型）。