带有 Nextjs 动态导入的 react-odometerjs 不会滚动数字

问题描述

我在 Nextjs 中使用 react-odometerjs。 正如文档所建议的：

import dynamic from 'next/dynamic'

const odometer = dynamic(import('react-odometerjs'),{

  ssr: false,loading: () => <p>0</p>,})


const App: FC = () => {
const [odometerValue,setodometerValue] = useState<number>(0)

useEffect(() => {
    const Millisecond = 20000

    setodometerValue(300)

    setInterval(function () {
      setodometerValue(300)
    },Millisecond)

    // }

  },[])

return  <odometer value={odometerValue} format='(,ddd)' animation='count' duration={1000} />

我通过动态导入来导入它，但是这样当数字改变时数字不会动画和滚动。 我注意到如果我在没有动态导入的情况下导入它，当我收到错误“文档未定义”时，我可以在下一次渲染之前看到数字动画。

还有其他人遇到这个问题吗？

如果有人对更好/不同的解决方案或软件包有任何建议，请分享。 我搜索了很多，但找不到一个好的选择。

解决方法

问题不在于动态导入，而在于 useEffect 中的代码。

尝试更新它以匹配以下内容：

useEffect(() => {
    setOdometerValue(300);
    const interval = setInterval(() => {
      setOdometerValue((value) => value + 300);
    },20000);
    return () => clearInterval(interval);
},[]);

您希望在使用 useEffect、window、setTimeout 等 setInterval 方法时从 addEvenListener 返回清理函数。