在React JS中动态获取Badge值

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

const BadgeComponent = () => {
  const [badgeValue, setBadgeValue] = useState(0); // 定义状态并初始化为0

  useEffect(() => {
    // 在组件渲染后执行获取数据的操作
    fetchData();
  }, []);

  const fetchData = async () => {
    // 使用异步函数获取数据
    try {
      const response = await fetch('https://example.com/api/badge'); // 通过API获取Badge值
      const data = await response.json();
      setBadgeValue(data.badge); // 更新状态中的Badge值
    } catch (error) {
      console.error('Error fetching badge:', error);
    }
  };

  return (
    <div>
      <span>{badgeValue}</span> {/* 使用状态中的Badge值进行展示 */}
      {/* 其他组件代码 */}
    </div>
  );
};

export default BadgeComponent;