如何用TypeScript接入count.cab API实现网站访客计数器

先梳理你代码里的核心问题，一步步修正：

1. 修复组件结构错误 #

你的getvisitor函数、useEffect钩子和JSX代码都写在了Footer组件的外部（提前闭合了组件大括号），导致这些逻辑根本没在组件内部执行。必须把所有相关代码放到Footer组件的函数体里。

2. 修正API请求与响应处理 #

• 新手阶段用原生fetch更易排查问题，避免自定义封装工具带来的未知问题。
• count.cab的hit接口返回的是直接包含count字段的JSON对象，不需要取response.visitor，且不能给状态赋值数组[]（与你定义的visitortype类型不符）。
• 必须解析响应的JSON数据，否则拿到的是原始响应对象，不是实际计数数据。

3. 完善状态初始化 #

给useState设置初始值，避免visitor一开始为undefined，导致渲染时visitor?.count显示空白。

修正后的完整代码 #

type Visitortype = {
  count: number;
};

const Footer = () => {
  // 初始化状态，给默认值避免undefined
  const [visitor, setVisitor] = useState<Visitortype>({ count: 0 });

  const getVisitor = async () => {
    try {
      const response = await fetch('https://count.cab/hit/ghG6Oirn0b');
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      const data = await response.json();
      // 接口返回的data直接包含count字段，直接赋值即可
      setVisitor({ count: data.count });
    } catch (error) {
      // 打印错误方便调试
      console.error('获取访客数失败:', error);
    }
  };

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

  return (
    <GridItem
      w="100%"
      h={{ base: '80px', lg: '300px' }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: 'center', lg: 'stretch' }}
        marginTop={{ base: '0', lg: '60px' }}
        marginLeft={{ base: '0', lg: '50px' }}
      >
        <Box w={{ base: '100px', lg: '220px' }} paddingBottom={'10px'}>
          <Image src={imgLogoMd} alt="Logo" w="100%" />
          <HStack>
            <Text
              fontSize={{ base: 'xs', lg: 'md' }}
              textAlign={'justify'}
            >
              {visitor.count} Visitor{visitor.count !== 1 && 's'}
            </Text>
          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );
};

额外优化点 #

• 变量名遵循小驼峰规范（比如visitortype改成Visitortype，setvisitor改成setVisitor），符合TypeScript编码习惯。
• 给访客数添加复数处理：当计数不为1时显示Visitors，更符合英文语法。
• 增加响应状态判断和错误打印，方便调试请求失败的场景。

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