数字显示为 NaN

Question

我正在使用 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>

呈现 'NaN' 计数器组件所在的位置。

我哪里错了？提前致谢！

Answer 1

看起来 props.number 是一个数字，但它不是，它是 react-spring 中 AnimatedValue 的一个实例，所以你不能将你的典型函数应用到它，什么不是。

我很确定如果你想格式化那个数值你可以做类似 {props.number.interpolate(number => number.toFixed())}

数字显示为 NaN

Number showing as NaN

javascript

reactjs

react-spring