本教程旨在解决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;进行赋值。虽然这在JavaScript中是合法的，但当需要遍历或按特定结构更新数组中的对象时，使用数组（如[{ 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请求数量，当所有预期的请求都完成后，再进行最终的特色池计算和状态更新。
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 ? <p>Loading...</p> : <p>Loaded {featuredPool?.title}</p>}
</>
);
};注意事项：
- 在POOLS数组定义中，targetedAPYId可能为undefined，请确保在访问它之前进行空值检查，或将其类型定义为string | undefined。
- 原始代码中的if (counter == 3)硬编码了请求数量。在重构后的代码中，我改用totalPoolsToFetch来动态确定需要等待的请求数量，这使得代码更具通用性。
- 添加了基本的错误处理和数据存在性检查，例如response.ok和res.data。
- 在计算maxApy时，将apyReward从字符串转换为浮点数（parseFloat）是必要的，以确保正确的数值比较。
关键知识点与最佳实践
- 状态是组件更新的驱动力：在React中，任何需要影响UI显示的数据都应该作为组件的状态进行管理。局部变量的修改不会触发组件的重新渲染。
- 选择合适的数据结构：根据数据的特性和操作需求选择最佳的数据结构。对于一组具有相同结构的对象，数组（Array<Object>）通常比纯对象（Object）更合适。
- 异步操作的同步处理：当有多个并发的异步操作时，需要一种机制来判断所有操作是否都已完成，例如使用计数器、Promise.all等。
-
TypeScript的最佳实践：
- 定义清晰的类型接口（interface或type）来描述数据结构。
- 尽可能避免使用@ts-ignore，它会削弱TypeScript的类型检查优势。如果遇到类型错误，应优先修正类型定义或代码逻辑。
- 在访问可能为undefined或null的属性时，使用可选链操作符（?.）和空值合并运算符（??）进行安全访问。
- 错误处理：在进行网络请求时，务必添加错误处理机制（try...catch或.catch()），以提高应用的健壮性。
- 数据类型转换：在进行数值比较或计算之前，确保数据类型是正确的（例如，将字符串表示的数字转换为实际的数字类型）。
通过遵循这些原则，您可以构建出更健壮、可维护且响应迅速的React应用程序。
