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

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

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

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

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

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); // 停止加载
}

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 ? <p>Loading...</p> : <p>Loaded {featuredPool?.title}</p>}
    </>
  );
};