时间戳

首页 > 解决方案 > 数字显示为 NaN

javascript - 数字显示为 NaN

问题描述

我正在使用 react-spring 制作一个在 10 秒内从零 (0) 计数到十 (10) 的组件：

export default function Counter() {
    const props = useSpring({
        from: { number: 0 },
        to: { number: 10 },
        config: {
            duration: 10000
        } 
    });

    return (
        <animated.h1>
           {props.number}
        </animated.h1>
    )
}

这会导致在渲染时向上计数的大浮点数。我现在只想显示整数值而不是浮点数。

使用：

<animated.h1>
   {props.number.toFixed()}
</animated.h1>

产量：TypeError: props.number.toFixed is not a function

使用：

<animated.h1>
   {Number(props.number).toFixed()}
</animated.h1>

在 Counter 组件所在的位置呈现“NaN”。

我哪里错了？提前致谢！

标签： javascriptreactjsreact-spring

解决方案

它看起来像是props.number一个数字，但它不是，它是AnimatedValuefrom的一个实例，react-spring因此您不能将典型的函数应用于它，什么不是。

我很确定如果您想格式化该数值，您可以执行类似的操作{props.number.interpolate(number => number.toFixed())}

推荐阅读