React-Odometerjs with Nextjs Dynamic Import 不会滚动数字

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

我用动态导入导入它，但这样数字就不会在数字变化时产生动画和滚动。我注意到，如果我在没有动态导入的情况下导入它，当我得到错误"时，我可以在下一次渲染之前看到数字动画；文档未定义"；。

还有人有这个问题吗？

如果有人对更好/不同的解决方案或套餐有建议，请分享。我找了很多，但找不到一个好的替代品。

Answer 1

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

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

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

当使用window方法(如setTimeout、setInterval、addEvenListener等(时，您希望从useEffect返回一个清除函数。