React组件中异步数据加载与UI更新：解决数据不显示问题

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

// ... 其他类型定义和POOLS常量 ...

export const FeaturedPool = () => {
  const [loading, setLoading] = useState(true);
  // 声明一个状态变量来存储特色池子信息
  const [featuredPool, setFeaturedPool] = useState<PoolInfo | undefined>(undefined);

  // ... useEffect 内部逻辑 ...

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

export type PoolData = {
  targetedAPYId: string | undefined; // 考虑到原始POOLS中targetedAPYId可能为可选
  apyReward: string;
};

// 在 useEffect 内部
let poolsArray: PoolData[] = [];
// ...
poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });
// ...
poolsArray.forEach((poolItem) => {
  if (poolItem.targetedAPYId === pool.targetedAPYId) {
    poolItem.apyReward = result;
  }
});

// if (counter == 3) {  => if (counter === 3) {
// poolsArray[key] == max => poolsArray[key] === max
// x.targetedAPYId == poolKey => x.targetedAPYId === poolKey

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

// 假设 POOLS 变量和 PoolInfo 类型已在其他地方定义或导入
// 例如：
// import { POOLS } from './constants';

// 定义用于临时存储APY数据的类型
export type PoolData = {
  targetedAPYId: string | undefined; // 考虑到 POOLS 中 targetedAPYId 可能为可选
  apyReward: string;
};

// PoolInfo 类型定义，从问题内容中提取
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?: Token[]; // 假设 Token 类型也已定义
};

// 假设 POOLS 是一个全局变量或从其他文件导入的常量
// 实际应用中，POOLS 应该被正确导入
declare const POOLS: PoolInfo[]; // 这是一个声明，实际使用时请替换为 import

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

  useEffect(() => {
    let counter = 0;
    // 使用数组来存储每个池子的APY数据，方便后续查找和更新
    let poolsArray: PoolData[] = [];

    // 过滤出符合条件的池子，并对每个池子发起API请求
    const filteredPools = POOLS?.filter((x) => x.stableCoins);

    // 如果没有符合条件的池子，直接结束加载
    if (!filteredPools || filteredPools.length === 0) {
      setLoading(false);
      return;
    }

    filteredPools.forEach((pool) => {
      // 在发起请求前，为当前池子在 poolsArray 中创建一个占位符
      poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });

      if (!pool.targetedAPYId) {
        console.warn(`Pool with id ${pool.id} is missing targetedAPYId.`);
        counter++; // 即使没有ID，也计数，防止卡死
        if (counter === filteredPools.length) {
          // 如果所有请求（包括无效的）都已处理，检查并设置结果
          processResults(poolsArray, filteredPools, setFeaturedPool, setLoading);
        }
        return;
      }

      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 中对应池子的 apyReward
            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 APY for ${pool.targetedAPYId}:`, error);
          // 在错误发生时也应该计数，以避免加载状态一直不结束
          poolsArray.forEach((poolItem) => {
            if (poolItem.targetedAPYId === pool.targetedAPYId) {
              poolItem.apyReward = "0.00"; // 或者其他默认值
            }
          });
        })
        .finally(() => {
          counter++;
          // 当所有请求都完成时
          if (counter === filteredPools.length) {
            processResults(poolsArray, filteredPools, setFeaturedPool, setLoading);
          }
        });
    });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  // 辅助函数，用于处理所有请求完成后的逻辑
  const processResults = (
    poolsArray: PoolData[],
    allPools: PoolInfo[],
    setFeaturedPool: React.Dispatch<React.SetStateAction<PoolInfo | undefined>>,
    setLoading: React.Dispatch<React.SetStateAction<boolean>>
  ) => {
    // 过滤掉没有有效APY数据的池子，并转换为数字进行比较
    const validApyRewards = poolsArray
      .filter(item => item.apyReward !== "" && item.apyReward !== "0.00")
      .map((poolItem) => parseFloat(poolItem.apyReward));

    if (validApyRewards.length > 0) {
      const maxApy = Math.max(...validApyRewards);
      // 找到对应最高APY的池子ID
      const poolKey = poolsArray.find((poolItem) => parseFloat(poolItem.apyReward) === maxApy)?.targetedAPYId;

      if (poolKey) {
        // 从原始 POOLS 列表中找到完整的池子信息
        const foundPool = allPools.find((pool) => pool.targetedAPYId === poolKey);
        setFeaturedPool(foundPool); // 更新状态，触发重新渲染
      }
    } else {
      console.log("No valid APY data found to determine featured pool.");
    }
    setLoading(false); // 无论是否找到，都结束加载状态
  };

  return (
    <>
      {loading ? <p>Loading...</p> : <p>Loaded {featuredPool?.title || 'No featured pool found'}</p>}
    </>
  );
};