代码之家 › 专栏 › 技术社区 › Anaya Ammar

渲染后未显示的值

api reactjs

-1

Anaya Ammar · 技术社区 · 1 年前

我一直在从常量文件中获取池数据。我被指派创建一个特色保险库,即从API获取后APY奖励值最高的保险库。我从API中获取了所有三个数据并进行了计算。我正在控制台上打印值,但它不会出现在组件本身中。

export const FeaturedPool = () => {
  // @ts-ignore
  const [loading, setLoading] = useState(true);
  // @ts-ignore
  let poolsArray = {};
  let poolDetails: PoolInfo | undefined;

  useEffect(() => {
    let counter = 0;
    POOLS?.filter((x) => x.stableCoins)?.map((pool) => {
      // fetchAPYData(pool.targetedAPYId);
      // @ts-ignore
      poolsArray[pool.targetedAPYId] = "";
      fetch("https://yields.llama.fi/chart/" + pool.targetedAPYId)
        .then((response) => {
          return response.json();
        })
        .then((res) => {
          let result = res.data.at(-1).apyReward.toFixed(2);
          // @ts-ignore
          poolsArray[pool.targetedAPYId] = result;
          counter++;
          if (counter == 3) {
            console.log("ALL 3 FETCHED");
            let arr = Object.values(poolsArray);

            // @ts-ignore
            let max = Math.max(...arr);
            const poolKey =
              // @ts-ignore
              Object.keys(poolsArray).find((key) => poolsArray[key] == max);
            // ts-ignore
            poolDetails = POOLS.find((x) => x.targetedAPYId == poolKey);

            console.log(poolDetails);
            console.log(poolDetails?.title);
            setLoading(false);
          }
        });
    });
  }, []);

 return (
   This line is causing problem. Title does not appear 
<>{loading ? <p>Loading... </p> : <p>Loaded {poolDetails?.title}</p>}</>
  );
};

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[];
};

我要展示apy奖励值最高的金库

1 回复 | 直到 1 年前

Kevin Thomas 1 年前

您的代码中有一些问题可能会导致此问题。让我们仔细检查并进行必要的更正:

定义不正确的池数组作为对象而不是数组:

//不正确让poolsArray={};

//正确设poolsArray=[];
为池数组赋值不正确:

//@ts忽略 poolsArray[pool.targetedAPYId]=“”;
由于poolsArray现在是一个数组,您应该使用push方法为其添加值:

poolsArray.push({targetedAPYId:pool.targetedAPYId,apyReward:“”});
正在使用提取的值更新池数组:

//@ts忽略 poolsArray[pool.targetedAPYId]=结果;
您应该更新池中对应的对象数组:

poolsArray.forEach((poolItem)=>{ if(poolItem.targetedAPYId==pool.targetedAPYId){ poolItem.apyReward=结果; } });
使用严格等式将计数器与数字3进行比较操作员:

如果(计数器==3){

使用严格相等运算符(===)将计数器与数字3进行比较:

如果(计数器==3){
ts的用法不正确忽略注释:

//ts忽略 poolDetails=POOLS.find((x)=>x.targetedAPYId==池密钥);
正确的注释应该是@ts-ignore:

//@ts忽略 poolDetails=POOLS.find((x)=>x.targetedAPYId==池密钥);
错误访问JSX代码中的池详细信息:

<>{加载?

正在加载。。。
以下为:
已加载{poolDetails?.title}
}</>
您应该将poolDetails值分配给一个状态变量,以便组件在更改时可以重新发送。将poolDetails变量替换为状态变量,并相应地进行更新:

const[featuredPool,setFeaturedPool]=useState<池信息|未定义>(未定义);

//在useEffect回调中: setFeaturedPool(POOLS.find((x)=>x.targetedAPYId==池密钥);

//在JSX代码中: <>{加载?

正在加载。。。
以下为:
已加载{featuredPool?.title}
}</>
有了这些更正,您的代码应该可以按预期工作,并且显示具有最高APY奖励值的保险库的标题。

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

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

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

    POOLS?.filter((x) => x.stableCoins)?.forEach((pool) => {
      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);
          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);
          }
        });
    });
  }, []);

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

export type PoolData = {
  targetedAPYId: string;
  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?: Token[];
};

请确保将PoolInfo和PoolData类型替换为它们的实际类型定义(如果它们是从其他文件导入的)。此外,确保 POOLS变量在您的密码