我的客户想制作总访客柜台.

当用户不刷新页面时,是否有可能使总访客计数增加?因此用户无需刷新页面即可看到访问者总数的增加.我应该添加什么才能实现这一目标?请详细解释一下,因为我是Typescript 新手.

这是我的代码

type visitortype={
  count: number;
}


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

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  setvisitor(allvisitor))
    .catch(error => console.log(error));
  }, []);

 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>
  );

};

推荐答案

您可以查看Web Sockets:

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

您还可以考虑应用setInterval来"民意调查"更改.

发现这个: How to setInterval for every 5 second render with React hook useEffect in React Native app?

注意清晰间隔部分.

Typescript相关问答推荐

如何根据参数的值缩小函数内的返回类型?

如何从具有给定键列表的对象类型的联合中构造类型

当使用`type B = A`时,B的类型显示为A.为什么当`type B = A时显示为`any `|用A代替?

单击并移除for循环中的一项也会影响另一项

根据上一个参数值查找参数类型,也返回类型

如何在LucideAngular 添加自定义图标以及如何使用它们

TypeScrip-将<;A、B、C和>之一转换为联合A|B|C

通过字符串索引访问对象';S的值时出现文字脚本错误

我可以使用TypeScrip从字符串词典/记录中填充强类型的环境对象吗?

有什么方法可以类型安全地包装import()函数吗?

是否将自动导入样式从`~/目录/文件`改为`@/目录/文件`?

为什么&Quot;元素隐式具有';Any';类型,因为...即使我已经打字了,也不能作为索引显示错误吗?

在组件卸载时try 使用useEffect清除状态时发生冲突.react +打字

Angular NG8001错误.组件只能在一个页面上工作,而不是在她的页面上工作

在抽象类构造函数中获取子类型

三重融合视角与正交阵

在类型脚本中创建显式不安全的私有类成员访问函数

有没有一种方法可以提升对象的泛型级别,而对象的值是泛型函数?

替换typescript错误;X类型的表达式可以';t用于索引类型Y;带有未定义

我可以使用对象属性的名称作为对象中的字符串值吗?