React组件异步数据获取与UI更新：解决数据不显示问题-js教程-PHP中文网

React组件异步数据获取与UI更新：解决数据不显示问题

花韻仙語

发布： 2025-11-23 16:24:22

原创

641人浏览过

React组件异步数据获取与UI更新：解决数据不显示问题

本文深入探讨了react组件中异步数据获取后ui不更新的问题，核心在于未能正确使用react状态管理机制。教程将详细阐述如何通过`usestate`管理异步获取的数据，优化数据结构，并确保组件在数据更新后正确渲染，最终实现动态展示最高apy金库标题的功能。

1. 理解React组件的渲染机制与状态管理

在React中，组件的UI更新主要由其状态（state）或属性（props）的变化驱动。当组件内部的局部变量发生改变时，React并不会自动重新渲染组件。这就是为什么在异步数据获取后，即使数据已成功打印到控制台，但UI却未同步更新的原因。

原始代码中，poolDetails被定义为一个局部变量：

let poolDetails: PoolInfo | undefined;

登录后复制

当poolDetails在useEffect内部被赋值时，它并不会触发组件的重新渲染。为了解决这个问题，我们需要将需要影响UI的数据存储在组件的状态中。

2. 引入状态变量管理动态数据

为了确保组件在数据更新后能够正确渲染，我们需要使用React的useState Hook来管理featuredPool和loading状态。

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

export const FeaturedPool = () => {
  const [loading, setLoading] = useState(true); // 管理加载状态
  const [featuredPool, setFeaturedPool] = useState<PoolInfo | undefined>(undefined); // 管理最高APY金库信息
  // ... 其他代码
};

登录后复制

通过将featuredPool定义为状态变量，每当setFeaturedPool被调用时，React都会知道该组件的状态已更新，并会触发一次重新渲染，从而在UI上显示最新的数据。

3. 优化数据结构与异步请求管理

在处理多个异步请求并聚合结果时，选择合适的数据结构至关重要。原始代码中的poolsArray最初被定义为一个空对象{}，但随后又尝试以数组的方式进行操作，这容易导致混淆和错误。

3.1 定义辅助数据类型

为了更好地组织从API获取的APY数据，我们可以定义一个辅助类型PoolData：

export type PoolData = {
  targetedAPYId: string;
  apyReward: string;
};

登录后复制

这个类型清晰地表示了每个池子的targetedAPYId及其对应的apyReward。

3.2 改进数据存储与更新逻辑

在useEffect中，我们应该将poolsArray初始化为一个PoolData类型的数组，并使用forEach循环来处理每个池子的数据获取和更新。

  useEffect(() => {
    let counter = 0;
    let poolsArray: PoolData[] = []; // 正确定义为数组

    // 过滤并遍历POOLS数组
    POOLS?.filter((x) => x.stableCoins)?.forEach((pool) => {
      // 初始化每个池子的数据项并添加到poolsArray
      poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });

      // 发起API请求
      fetch("https://yields.llama.fi/chart/" + pool.targetedAPYId)
        .then((response) => response.json())
        .then((res) => {
          const result = res.data.at(-1).apyReward.toFixed(2);

          // 更新poolsArray中对应池子的apyReward
          poolsArray.forEach((poolItem) => {
            if (poolItem.targetedAPYId === pool.targetedAPYId) {
              poolItem.apyReward = result;
            }
          });

          counter++; // 计数器，跟踪完成的请求数量
          // ... 后续处理逻辑
        });
    });
  }, []);

登录后复制

这里，我们首先为每个符合条件的池子创建一个PoolData对象并推入poolsArray。然后，在每个fetch请求成功后，我们遍历poolsArray找到对应的项并更新其apyReward。

Supercreator

AI视频创作编辑器，几分钟内从构思到创作。

查看详情

3.3 严格相等性比较

在JavaScript/TypeScript中，使用严格相等运算符===而不是==是最佳实践，可以避免类型转换带来的潜在问题。例如，将if (counter == 3)改为if (counter === 3)。

4. 识别最高APY金库并更新组件状态

当所有异步请求完成后（由counter === 3判断），我们就可以开始处理数据，找出APY最高的金库，并更新featuredPool状态。

          // ... (在 counter++ 之后)
          if (counter === 3) {
            // 从poolsArray中提取所有apyReward值
            const arr = poolsArray.map((poolItem) => parseFloat(poolItem.apyReward)); // 转换为数字进行比较
            const max = Math.max(...arr); // 找出最大APY值

            // 找到具有最大APY的池子的targetedAPYId
            const poolKey = poolsArray.find((poolItem) => parseFloat(poolItem.apyReward) === max)?.targetedAPYId;

            if (poolKey) {
              // 在原始POOLS数组中找到对应的PoolInfo对象
              const foundPool = POOLS.find((pool) => pool.targetedAPYId === poolKey);
              // 更新featuredPool状态，触发组件重新渲染
              setFeaturedPool(foundPool);
            }

            // 设置加载状态为false
            setLoading(false);
          }

登录后复制

这里，我们首先将apyReward字符串转换为数字进行比较，然后找到最大值对应的targetedAPYId，最后从原始的POOLS数组中找到完整的PoolInfo对象，并使用setFeaturedPool更新状态。

5. JSX中的条件渲染

在JSX中，我们可以利用loading状态变量来实现条件渲染，在数据加载时显示“Loading...”，加载完成后显示featuredPool的标题。

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

登录后复制

通过featuredPool?.title，我们使用了可选链操作符，以安全地访问featuredPool的title属性，避免在featuredPool为undefined时引发错误。

6. 完整代码示例

结合上述所有修改，FeaturedPool组件的完整代码如下：

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

// 假设 POOLS 变量和 Token 类型已在其他地方定义或导入
// 例如：
// const POOLS: PoolInfo[] = [/* ... */];
// type Token = { /* ... */ };

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

  useEffect(() => {
    let counter = 0;
    let poolsArray: PoolData[] = [];

    // 确保 POOLS 存在且有 stableCoins 属性
    POOLS?.filter((x) => x.stableCoins)?.forEach((pool) => {
      if (pool.targetedAPYId) { // 确保 targetedAPYId 存在
        poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });

        fetch("https://yields.llama.fi/chart/" + pool.targetedAPYId)
          .then((response) => 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;
                }
              });
            }

            counter++;
            // 假设只有 3 个 stableCoins 的池子，或者根据实际过滤结果的数量来判断
            // 更健壮的做法是比较 counter 和 POOLS.filter(...).length
            if (counter === POOLS?.filter((x) => x.stableCoins)?.length) { 
              const arr = poolsArray.map((poolItem) => parseFloat(poolItem.apyReward));
              const max = Math.max(...arr);
              const poolKey = poolsArray.find((poolItem) => parseFloat(poolItem.apyReward) === max)?.targetedAPYId;

              if (poolKey) {
                const foundPool = POOLS.find((pool) => pool.targetedAPYId === poolKey);
                setFeaturedPool(foundPool);
              }

              setLoading(false);
            }
          })
          .catch(error => {
            console.error("Error fetching APY data:", error);
            // 即使有错误也增加计数器，避免一直处于加载状态
            counter++;
            if (counter === POOLS?.filter((x) => x.stableCoins)?.length) {
                setLoading(false);
            }
          });
      }
    });
  }, []); // 空依赖数组确保只在组件挂载时运行一次

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

// 定义 PoolData 类型
export type PoolData = {
  targetedAPYId: string;
  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[];
};

// 假设 POOLS 和 Token 类型在实际应用中会被导入或定义
// 例如：
// import { POOLS, Token } from './constants';

登录后复制

注意事项：