1

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

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

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

还有谁有相同的问题吗？

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

4

1 回答 1

0

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

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

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

您想useEffect在使用 , , 等方法时返回一个清理window函数。setTimeoutsetIntervaladdEvenListener

于 2021-01-04T16:48:46.630 回答