React.js 访客计数器样式不符问题求助

自定义Card组件问题分析与修复 #

存在的问题 #

• 状态未同步：useEffect中仅打印API返回的访客数据，未调用setvisitor更新状态，导致visitor始终为undefined，Card组件接收的number值无效。
• 样式缺陷：
  • 数字未垂直居中：仅设置水平居中，垂直方向无对齐处理，数字会偏上显示。
  • 多余右侧间距：每个数字盒子都加了marginRight:10，最后一个数字右侧会保留多余空白。
• 边界情况未处理：当number为undefined时，${props.number}会转为字符串"undefined"，拆分后显示错误内容。
• TypeScript类型不严谨：Card组件的props使用any类型，缺乏类型约束。

修复后的代码 #

// 定义类型
type CardProps = {
  number?: number;
};

function Card({ number = 0 }: CardProps) {
  const count = `${number}`.split('');

  return (
    <div style={{ display: "flex", gap: "10px" }}>
      {count.map((val, index) => (
        <div
          key={index}
          style={{
            fontSize: 42,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center",
            lineHeight: "55px", // 实现垂直居中
            borderRadius: "4px", // 可选：增加圆角优化视觉
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

const Footer = () => {
  const [visitor, setVisitor] = useState<{ count?: number }>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
      .then(response => response.json())
      .then(allVisitor => setVisitor(allVisitor)) // 同步API返回的访客状态
      .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" }}
      >
        <Card number={visitor?.count} />
      </VStack>
    </GridItem>
  );
};

react-flip-number组件问题分析与修复 #

存在的问题 #

• 状态未同步：未在useEffect中更新visitor状态，导致组件默认显示0而非真实访客数。
• 样式参数不匹配：height:25、width:20和fontSize:16的尺寸比例过小，且未处理垂直居中，无法达到目标样式的视觉效果。
• 动画触发逻辑不明确：play属性固定为true，无法在数字变化时精准触发翻转动画。

修复后的代码 #

const Footer = () => {
  const [visitor, setVisitor] = useState<{ count?: number }>();
  const [prevCount, setPrevCount] = useState(0);

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
      .then(response => response.json())
      .then(allVisitor => {
        setPrevCount(visitor?.count ?? 0);
        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" }}
      >
        <FlipNumbers 
          height={55} 
          width={40}  
          color="white" 
          background="#8D0000"
          numberStyle={{
            fontSize: 42,
            fontWeight: "bold",
            lineHeight: "55px", // 实现垂直居中
          }}
          play={prevCount !== (visitor?.count ?? 0)} // 数字变化时触发动画
          perspective={100} 
          numbers={`${visitor?.count ?? 0}`}
        />
      </VStack>
    </GridItem>
  );
};

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