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

Question

我在 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} />

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

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

如果有人对 better/different 解决方案或包有建议，请分享。我搜索了很多，但找不到好的选择。

Answer 1

问题不在于动态导入，而在于 useEffect.

中的代码

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

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

当使用 setTimeout、setInterval、addEvenListener 等 window 方法时，您想要 return 来自 useEffect 的清理函数等等

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

react-odometerjs with Nextjs dynamic imports doesn't scroll numbers

reactjs

next.js

dynamic-import

odometer