React组件中异步数据获取与状态更新指南-js教程-PHP中文网

React组件中异步数据获取与状态更新指南

本文将深入探讨在react组件中处理异步数据获取并正确更新ui的常见问题与解决方案。我们将通过一个实际案例，详细分析如何利用react的状态管理机制（`usestate`）、副作用钩子（`useeffect`）以及恰当的数据结构来确保组件在数据加载完成后能够正确地渲染最新信息，特别是在处理多个异步请求并根据结果进行筛选时。

理解React的渲染机制与状态管理

在React中，组件的UI更新（即重新渲染）通常由其状态（state）或属性（props）的变化触发。直接修改组件内部的普通变量并不会导致组件重新渲染。这是许多初学者在处理异步数据时常遇到的一个陷阱。

本教程将围绕一个具体场景展开：从外部API获取多个资金池的APY（年化收益率）数据，然后找出APY最高的“特色资金池”，并将其标题展示在UI上。

初始代码分析与问题诊断

原始代码尝试在一个useEffect钩子中执行多个API请求，并在所有请求完成后计算出最高APY的资金池。然而，它遇到了一个核心问题：数据在控制台打印正确，但UI并未更新。

// 原始代码片段（简化）
export const FeaturedPool = () => {
  let poolDetails: PoolInfo | undefined; // 普通变量，非状态
  // ... 其他状态和逻辑 ...

  useEffect(() => {
    // ... 异步请求和计算逻辑 ...
    // poolDetails = POOLS.find(...) // 直接修改普通变量
    // console.log(poolDetails?.title); // 控制台可见
    setLoading(false); // 仅更新了loading状态
  }, []);

  return (
    <>{loading ? <p>Loading...</p> : <p>Loaded {poolDetails?.title}</p>}</> // poolDetails未触发渲染
  );
};

登录后复制

问题根源分析：

非状态变量导致UI不更新： poolDetails被定义为一个普通的let变量。在useEffect内部对其赋值，并不会通知React组件需要重新渲染。React只对通过useState或useReducer管理的状态变化做出响应。
poolsArray的数据结构不当： 原始代码将poolsArray定义为一个空对象{}，并尝试通过poolsArray[pool.targetedAPYId] = result来存储APY。虽然JavaScript对象可以这样使用，但当需要迭代或根据特定条件更新数组中的元素时，一个包含对象的数组（例如[{ targetedAPYId: 'id1', apyReward: '10.23' }]）会更具可读性和操作性。
类型断言滥用： 过多的@ts-ignore表明代码中存在类型不匹配或类型推断问题，这通常是设计问题的信号。

解决方案：正确利用React状态与副作用

为了解决上述问题，我们需要对代码进行重构，核心思想是：任何需要在UI中反映的数据变化都必须通过React的状态管理来实现。

1. 引入状态管理

首先，我们需要为“特色资金池”引入一个状态变量，以便其值更新时能触发组件重新渲染。

左手医生开放平台

左医科技医疗智能开放平台

查看详情

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

// 定义用于存储临时APY数据的类型
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是从外部导入的常量数组
declare const POOLS: PoolInfo[]; // 声明POOLS变量，实际项目中应从文件导入

export const FeaturedPool = () => {
  const [loading, setLoading] = useState(true);
  // 使用useState来管理featuredPool，初始值为undefined
  const [featuredPool, setFeaturedPool] = useState<PoolInfo | undefined>(undefined);

  // ... useEffect 逻辑 ...
};

登录后复制

2. 优化数据结构与异步处理

在useEffect内部，我们需要更合理地存储和更新每个资金池的APY数据。

  useEffect(() => {
    let counter = 0;
    // 将poolsArray定义为PoolData对象的数组
    let poolsArray: PoolData[] = [];

    // 过滤并遍历符合条件的资金池
    POOLS?.filter((x) => x.stableCoins)?.forEach((pool) => {
      // 在发起请求前，为每个资金池在poolsArray中创建一个占位符
      poolsArray.push({ targetedAPYId: pool.targetedAPYId, apyReward: "" });

      fetch("https://yields.llama.fi/chart/" + pool.targetedAPYId)
        .then((response) => response.json())
        .then((res) => {
          // 确保数据存在且格式正确
          const result = res.data.at(-1)?.apyReward?.toFixed(2);

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

          counter++;
          // 当所有请求都完成时（这里假设有3个稳定币池）
          if (counter === POOLS.filter((x) => x.stableCoins).length) { // 更健壮的计数方式
            // 从poolsArray中提取所有APY值，并转换为数字进行比较
            const arr = poolsArray.map((poolItem) => parseFloat(poolItem.apyReward));
            const max = Math.max(...arr);

            // 找到最高APY对应的targetedAPYId
            const poolKey = poolsArray.find((poolItem) => parseFloat(poolItem.apyReward) === max)?.targetedAPYId;

            if (poolKey) {
              // 根据targetedAPYId找到完整的PoolInfo对象
              const foundPool = POOLS.find((p) => p.targetedAPYId === poolKey);
              // 更新featuredPool状态，这将触发组件重新渲染
              setFeaturedPool(foundPool);
            }

            // 数据加载完成，更新loading状态
            setLoading(false);
          }
        })
        .catch(error => {
          console.error("Error fetching APY data:", error);
          // 即使有错误也增加计数，防止loading状态永远不结束
          counter++;
          if (counter === POOLS.filter((x) => x.stableCoins).length) {
            setLoading(false);
          }
        });
    });
  }, []); // 空依赖数组表示只在组件挂载时运行一次

登录后复制

关键改进点：

poolsArray作为PoolData[]： 存储APY数据时，每个元素是一个包含targetedAPYId和apyReward的对象，方便查找和更新。
forEach遍历和更新： 使用forEach遍历POOLS，并在内部发起fetch请求。每个请求成功后，通过再次遍历poolsArray来更新对应项的apyReward。
动态计数器： 将if (counter === 3)改为if (counter === POOLS.filter((x) => x.stableCoins).length)，使其更具通用性，无论有多少个稳定币池都能正确判断所有请求是否完成。
类型安全： 移除不必要的@ts-ignore，并引入PoolData类型来增强代码的可读性和可维护性。
错误处理： 添加.catch()块以捕获API请求中的潜在错误。

3. 更新JSX渲染逻辑

最后，修改JSX部分，使其使用新的featuredPool状态变量进行渲染。

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

登录后复制

完整示例代码

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

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

// 假设POOLS是从外部导入的常量数组
// 实际项目中，POOLS可能来自一个单独的常量文件，例如：
// import { POOLS } from '../constants/pools';
declare const POOLS: PoolInfo[]; // 声明POOLS变量，实际项目中应从文件导入

// 定义用于存储临时APY数据的类型
export type PoolData = {
  targetedAPYId?: string; // targetedAPYId在PoolInfo中是可选的，这里保持一致
  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类型也已定义或导入
declare type Token = {
  // ... Token的属性 ...
};

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

  useEffect(() => {
    let counter = 0;
    // 确保POOLS存在且可迭代
    const stablePools = POOLS?.filter((x) => x.stableCoins) || [];
    const totalStablePools = stablePools.length;

    // 如果没有稳定币池，直接结束加载
    if (totalStablePools === 0) {
      setLoading(false);
      return;
    }

    let poolsArray: PoolData[] = [];

    stablePools.forEach((pool) => {
      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) => {
          // 确保数据结构符合预期
          const latestData = res.data?.at(-1);
          const result = latestData?.apyReward?.toFixed(2);

          if (result) {
            poolsArray.forEach((poolItem) => {
              if (poolItem.targetedAPYId === pool.targetedAPYId) {
                poolItem.apyReward = result;
              }
            });
          } else {
            console.warn(`No APY reward data found for pool: ${pool.targetedAPYId}`);
          }
        })
        .catch((error) => {
          console.error(`Error fetching APY data for ${pool.targetedAPYId}:`, error);
          // 在错误发生时，将该池的APY设为0或一个默认值，以避免影响后续的max计算
          poolsArray.forEach((poolItem) => {
            if (poolItem.targetedAPYId === pool.targetedAPYId) {
              poolItem.apyReward = "0.00"; // 或者其他错误处理策略
            }
          });
        })
        .finally(() => { // 无论成功或失败，都在finally中增加计数
          counter++;
          if (counter === totalStablePools) {
            // 确保所有APY值都被解析为数字进行比较
            const arr = poolsArray.map((poolItem) => parseFloat(poolItem.apyReward || "0"));
            const max = Math.max(...arr);

            // 找到最高APY对应的targetedAPYId，注意处理多个池子APY相同的情况
            // 这里选择第一个匹配的
            const poolKey = poolsArray.find((poolItem) => parseFloat(poolItem.apyReward || "0") === max)?.targetedAPYId;

            if (poolKey) {
              const foundPool = POOLS.find((p) => p.targetedAPYId === poolKey);
              setFeaturedPool(foundPool);
            } else {
              console.warn("Could not find a pool with the highest APY.");
            }
            setLoading(false);
          }
        });
    });
  }, []); // 依赖数组为空，确保只在组件挂载时运行一次

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

登录后复制

注意事项与最佳实践

React状态是UI更新的唯一触发器： 永远记住，在React中，只有通过useState、useReducer或props变化才能触发组件重新渲染。直接修改普通变量不会生效。
useEffect的依赖数组： 确保useEffect的依赖数组正确。空数组[]表示只在组件挂载时运行一次，适用于初始化数据获取。
数据结构选择： 根据数据的用途选择合适的数据结构。对于需要根据ID查找和更新的列表数据，一个包含对象的数组通常比纯对象更灵活。
异步操作的完整性： 在处理多个异步请求时，需要一个机制来判断所有请求是否都已完成（例如通过计数器或Promise.all）。
错误处理： 在API请求中添加.catch()块来处理网络错误或API返回的错误，并考虑如何在UI中反映这些错误。
类型安全： 充分利用TypeScript的类型定义来增强代码的健壮性和可读性，减少@ts-ignore的使用。
加载状态： 使用loading状态变量在数据加载期间向用户提供反馈，提升用户体验。
更高级的异步处理： 对于更复杂的多个并发请求场景，可以考虑使用Promise.all来等待所有Promise完成，这通常比手动计数器更简洁和健壮。