React中如何调用API获取数据并计算指定周期内的增长率

实现代码 #

import { useState, useEffect } from 'react';
// 保留你原有其他引入，例如图标组件、Wrapper、BorderLinearProgress等

function Card() {
  // 存储当前新增注册人数
  const [newEnrollments, setNewEnrollments] = useState(0);
  // 存储90天前的新增注册人数，用于计算增长率
  const [prevEnrollments, setPrevEnrollments] = useState(0);
  // 存储计算后的90天增长率
  const [growthRate, setGrowthRate] = useState(0);

  const getNewEnrollments = async () => {
    try {
      // 替换为实际的API请求逻辑
      const res = await fetch('/api/enrollment-stats');
      const data = await res.json();
      // 示例API返回格式可调整为同时返回当前与90天前的新增数据，若API直接返回增长率可跳过计算步骤
      // 示例返回值：{ "current_new": 12248, "prev_90d_new": 6446 }
      const currentVal = data.current_new || 0;
      const prevVal = data.prev_90d_new || 0;
      
      setNewEnrollments(currentVal);
      setPrevEnrollments(prevVal);
      
      // 增长率计算，增加除以0的容错处理
      if (prevVal > 0) {
        const calculatedRate = ((currentVal - prevVal) / prevVal * 100).toFixed(1);
        setGrowthRate(Number(calculatedRate));
      } else {
        // 90天前无数据时的默认值，可根据业务需求调整
        setGrowthRate(100);
      }
    } catch (err) {
      console.error('注册数据获取失败：', err);
    }
  };

  useEffect(() => {
    getNewEnrollments();   
  }, []);

  return (
    <Wrapper>
      <div className="card1">
        <div className="user">
          <HowToRegRoundedIcon className="icon" />
        </div>
        <div className="card-info">
          <h3>新增注册人数</h3>
          <h4>{newEnrollments}</h4>
          <p>
            <BorderLinearProgress variant="determinate" value={Math.min(growthRate, 100)} />
            <span>{growthRate}%，90天同比增长</span>
          </p>
        </div>
      </div>
    </Wrapper>
  );
}

注意事项 #

• 如果API已经直接返回计算完成的90天增长率，可以删除手动计算逻辑，直接将接口返回的增长率赋值给growthRate即可
• 进度条的value加了最大值100的限制，避免增长率超过100%时进度条显示异常，若业务需要展示超过100%的进度，可删除Math.min限制
• 增加了接口请求异常捕获和空值兼容，避免接口报错或数据异常导致页面崩溃

内容的提问来源于stack exchange，提问作者Tony