为什么 toFixed() 在我的 React 功能组件中不起作用？

Question

我有一个数字在 props 中传递给一个功能组件，在其中，我试图让它只有 2 个小数位。我想为此使用 toFixed() 函数，但出现错误： TypeError: props.data.price.toFixed is not a function。我试图将道具中的这个数字保存到局部变量中，然后对其调用 toFixed()，但结果是一样的...

我的功能组件体：

import React from 'react';

import classes from './Order.module.css';

const order = (props) =>{ 
    let keyTable = [];
    for(let igKey in props.data.ingredients){
        keyTable.push(igKey, "("+props.data.ingredients[igKey].toString()+")") 
    }
    let ingredientsString = keyTable.join(' ')
    return (
        <div className={classes.Order}>
            <p>Ingrediends: {ingredientsString}</p>
            <p>Price: <strong>USD {props.data.price.toFixed(2)}</strong></p>
        </div>
    );
}
 
export default order;

道具中发送的数量：6.22223

我只想让数字只有 2 位小数，而不是使用 Math.round()。有人知道怎么做吗？

编辑：当我把变量变成一个数字时，问题就解决了。出现错误是因为变量是字符串类型，您不能在字符串上调用 toFixed()。感谢大家的帮助！我在 Whosebug 上的第一个问题在 3 分钟内得到解决！

Answer 1

如果 price 不是 number，您将收到此错误。如果它看起来像一个数字但不是，那么它很可能是 string.

要将其转换为数字，可以使用Number()，然后应用toFixed():

var str = '6.22223';
var num = Number(str);
console.log(typeof(num));
console.log(num);
console.log(num.toFixed(2));

为什么 toFixed() 在我的 React 功能组件中不起作用？

why doesn't toFixed() work in my React functional component?

javascript

tofixed

reactjs