Число, показывающее как NaN

Question

Я использую реагирующую пружину для создания компонента, который считает от нуля (0) до десяти (10) в течение 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' там, где находится компонент Counter.

Куда я иду не так? Заранее спасибо!

Answer 1

Похоже, props.number - это число, но это не так, это экземпляр AnimatedValue из react-spring, поэтому вы не можете применить к нему типичные функции, а что нет.

I ' Я уверен, что если вы хотите отформатировать это числовое значение, вы можете просто сделать что-то вроде {props.number.interpolate(number => number.toFixed())}