React项目部署到Vercel后react-countup组件失效求助

以下是针对该问题的有效解决建议：

1. 替换render prop写法为直接渲染 #

你当前使用的render prop传递ref的方式，在生产构建优化过程中可能出现ref绑定失效的情况。可以改用组件直接渲染的方式，避免手动绑定ref的问题：

修改后的Stats组件代码：

import React from "react";
import CountUp from "react-countup";

const Stats = () => {
  return (
    <div className="flex mt-32 justify-center" id="stats">
      <div className="flex flex-col rounded-3xl p-10 md:flex-row gap-28 lg:pt-24 lg:pb-24 lg:pl-36 lg:pr-36 lg:bg-bgStats lg:bg-no-repeat lg:bg-contain">
        <div className="flex flex-col text-center ">
          <CountUp start={0} end={200000} duration={1.5} className="text-5xl text-sky-500" />
          <span className="text-gray-400 text-2xl"> Users</span>
        </div>
        <div className="flex flex-col text-center">
          <CountUp start={0} end={300} duration={1.5} prefix="$" suffix="M" className="text-5xl text-green-500" />
          <span className="text-gray-400 text-2xl"> Total Value</span>
        </div>
        <div className="flex flex-col text-center ">
          <CountUp start={0} end={250} duration={1.5} suffix="+" className="text-5xl text-orange-600" />
          <span className="text-gray-400 text-2xl"> Investors</span>
        </div>
      </div>
    </div>
  );
};

export default Stats;

这种写法由组件内部自动处理渲染和计数逻辑，规避了生产环境下的ref优化问题。

2. 手动控制计数触发时机 #

如果需要保留自定义渲染逻辑，可以通过useRef获取CountUp实例，在组件挂载时手动启动计数，确保生产环境下能正常触发：

import React, { useEffect, useRef } from "react";
import CountUp from "react-countup";

const Stats = () => {
  const countUpRefs = [useRef(null), useRef(null), useRef(null)];

  useEffect(() => {
    countUpRefs.forEach(ref => {
      if (ref.current) {
        ref.current.start();
      }
    });
  }, []);

  return (
    <div className="flex mt-32 justify-center" id="stats">
      <div className="flex flex-col rounded-3xl p-10 md:flex-row gap-28 lg:pt-24 lg:pb-24 lg:pl-36 lg:pr-36 lg:bg-bgStats lg:bg-no-repeat lg:bg-contain">
        <CountUp 
          ref={countUpRefs[0]}
          start={0} 
          end={200000} 
          duration={1.5}
          render={({ count }) => (
            <div className="flex flex-col text-center ">
              <span className="text-5xl text-sky-500">{count}</span>
              <span className="text-gray-400 text-2xl"> Users</span>
            </div>
          )}
        />
        <CountUp 
          ref={countUpRefs[1]}
          start={0} 
          end={300} 
          duration={1.5} 
          prefix="$" 
          suffix="M"
          render={({ count }) => (
            <div className="flex flex-col text-center">
              <span className="text-5xl text-green-500">{count}</span>
              <span className="text-gray-400 text-2xl"> Total Value</span>
            </div>
          )}
        />
        <CountUp 
          ref={countUpRefs[2]}
          start={0} 
          end={250} 
          duration={1.5} 
          suffix="+"
          render={({ count }) => (
            <div className="flex flex-col text-center ">
              <span className="text-5xl text-orange-600">{count}</span>
              <span className="text-gray-400 text-2xl"> Investors</span>
            </div>
          )}
        />
      </div>
    </div>
  );
};

export default Stats;

通过useEffect在组件挂载阶段手动调用start()，强制触发计数逻辑，避免生产环境下自动触发失效的问题。

3. 清除Vercel构建缓存并重新部署 #

Vercel的构建缓存可能导致依赖安装不完整或旧代码残留，操作步骤：

• 进入Vercel项目控制台
• 找到对应部署记录，点击"Redeploy"
• 勾选"Clear build cache"选项后确认重新部署

4. 升级react-countup到最新版本 #

你当前使用的react-countup@6.5.0可能存在与React 18生产构建兼容的问题，执行以下命令升级：

npm install react-countup@latest

升级后重新构建并部署到Vercel，新版本可能修复了生产环境下的渲染问题。

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