Next.js 使用Nextjs dynamic imports&x27；滚动数字

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

从“下一个/动态”导入动态
常数里程表=动态（导入（'react-odometerjs'）{
ssr：错，
加载：（）=>0
,，
})
常量应用程序：FC=（）=>{
常量[odometerValue，setOdometerValue]=useState（0）
useffect（（）=>{
常数毫秒=20000
setOdometerValue（300）
setInterval（函数（）{
setOdometerValue（300）
}，毫秒）
// }
}, [])
返回

我用dynamic import导入它，但在数字更改时，数字不会以这种方式进行动画和滚动。 我注意到，如果我在没有动态导入的情况下导入它，当我得到错误“document not defined”时，我可以在下一次渲染之前看到数字动画

还有其他人有这个问题吗

如果有人对更好/不同的解决方案或软件包有建议，请分享。

---

我搜索了很多，但找不到好的替代方案。

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

useffect

中的代码

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

useffect（（）=>{
setOdometerValue（300）；
常量间隔=设置间隔（（）=>{
setOdometerValue（（值）=>值+300）；
}, 20000);
return（）=>clearInterval（interval）；
}, []);

---

使用

setTimeout

、

setInterval

、

addevennelistener

等方法时，您希望从

useffect

窗口返回清理功能。

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

useffect

中的代码

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

useffect（（）=>{
setOdometerValue（300）；
常量间隔=设置间隔（（）=>{
setOdometerValue（（值）=>值+300）；
}, 20000);
return（）=>clearInterval（interval）；
}, []);

---

当使用

窗口

方法，如

设置超时

、

设置间隔

、

添加监听器

等时，您希望从

使用效果

返回清理功能。

谢谢！我确实在它之后实现了clearInterval，但我没有联系到这就是它工作的原因。现在有意义了！非常感谢。我确实在它之后实现了clearInterval，但我没有联系到这就是它工作的原因。现在有意义了！