使用打字稿显示网站的访客计数器

Question

我想问如何添加我网站的访问者数量。我已经尝试使用这里的 api https://countapi.xyz/ 但现在服务器已关闭，因此无法再使用。这里还有一个 api https://count.cab/。如何从这个 api https://count.cab/hit/ghG6Oirn0b 获取计数数据到我的打字稿尝试浏览但仍然不'不知道我对打字稿还是新手，所以请详细解释如何做。这里的代码没有错误消息，但计数未显示在我的网站上

     type visitortype={
      count:number
    }
    
    const Footer = () => {
      const [visitor, setvisitor] = useState<visitortype>();
    }
    
     const getvisitor = async () => {
        try {
          await fetchRequest({
            method: 'GET',
            path: 'https://count.cab/hit/ghG6Oirn0b',
          }).then((response) => {
            setvisitor(response.visitor || []);
            
          });
        } catch (error) {}
      };

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

        <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
              </Text>
            </HStack>
          </VStack>
        
        </GridItem>

Answer 1

您是否正在尝试创建一个可在另一个组件中使用的组件

Footer

，或者您是否希望此代码能够自行渲染一些 HTML？

如果您想创建一个组件，我修复了您的一些代码。重要的是，在函数组件内部调用钩子（如

useEffect()

），并且从那里返回你的 JSX，而不是将其放在某个地方。

type visitortype = {
  count: number;
};

const Footer = () => {
  const [visitor, setvisitor] = useState<visitortype>();

  const getvisitor = async () => {
    try {
      await fetchRequest({
        method: "GET",
        path: "https://count.cab/hit/ghG6Oirn0b",
      });
      // no need to use .then here, as you are already using await
      setvisitor(response.visitor || []);
    } catch (error) {
      // ensure you don't miss errors
      console.log(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
            </Text>
          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );
};

如果您想将此独立版本集成到您的网站中，我建议您看看这里。您需要执行类似的操作才能显示您的组件：

const domNode = document.getElementById('footer');
const root = createRoot(domNode);
root.render(<Footer />);

我没有测试代码，所以可能会留下一些错误。