Javascript ReactJS：如何使用toFixed（2）固定数字行值长度

我正在将从API获取的数据打印到一个表中，并且在将行的数值固定为小数方面遇到了一些困难。如果API中的行数据由数值组成，即10.0、333、8或100等，则在最后使用十进制值->10.00、333.00、100.00呈现

我熟悉的.toFixed2函数在React中的作用方式与我在javaScript中编写它的方式不同。我认为我误导了ES6标准，但我不确定。 如果我避免使用.toFixed2，它看起来是这样的

下面是我的rows.toFixed2代码示例，但它的功能不太好：

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: []
        }
    }

    componentDidMount()
    {

        fetch( "http://ickata.net/sag/api/staff/bonuses/" )
            .then( function ( response )
            {
                return response.json();
            } )
            .then( data =>
            {
                this.setState( { rows: data.rows, columns: data.columns } );
            } );

    }

    render()
    {

        return (
            <div id="container" className="container">
                <h1>Final Table with React JS</h1>
                <table className="datagrid">
                    <thead>
                        <tr> {
                            this.state.columns.map(( column, index ) =>
                            {
                                return ( <th>{column}</th> )
                            }
                            )
                        }
                        </tr>
                    </thead>
                    <tbody> {
                        this.state.rows.toFixed(2).map( row => (
                            <tr>{row.toFixed(2).map( cell => (
                                <td>{cell}</td>
                            ) )}
                            </tr>
                        ) )
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

欢迎您直接向我的回购协议捐款：

下面是使用.toFixed时与我的示例类似的情况：

不幸的是，我无法在网站上找到相关文档

它也不适用于行[].length.toFixed2

如有任何建议，将不胜感激

我们再次调用toFixed2 this.state.rows，它是一个数组-这可能会引发一个错误，导致渲染失败。这就解释了为什么你在屏幕上看不到任何东西

我怀疑你想要的是更像这样的东西：

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

在这个版本中，我们查看每个单元格-如果内容是一个数字，我们在渲染之前调用toFixed2-否则我们只渲染它。从技术上讲，这个答案是正确的，但它也会打印年龄行值，这些值不应该是小数。我想我必须对行[3]值进行硬编码。

再次调用this.state.rows作为数组的toFixed2-这可能会引发错误，导致渲染失败。这就解释了为什么你在屏幕上看不到任何东西

我怀疑你想要的是更像这样的东西：

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

---

在这个版本中，我们查看每个单元格-如果内容是一个数字，我们在渲染之前调用toFixed2-否则我们只渲染它。从技术上讲，这个答案是正确的，但它也会打印年龄行值，这些值不应该是小数。我想我必须对行[3]的值进行硬编码。

向@Okazari表示问候，谢谢你的建议。以下是技术上正确的答案，但逻辑上不正确：

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

---

这是不符合逻辑的，因为年龄行值和十进制一样打印，只有价格值应该是十进制。进一步的建议将不胜感激

欢迎@Okazari提出建议。以下是技术上正确的答案，但逻辑上不正确：

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

---

这是不符合逻辑的，因为年龄行值和十进制一样打印，只有价格值应该是十进制。进一步的建议将不胜感激

嘿@Duncan Thacker不幸的是，我得到的结果与上面描述的相同。只是空白的一页。应用程序根本没有渲染。但我会考虑一下你的建议。我想我需要一个新函数isNumber。谢谢！啊，对不起，我通常用洛达斯的。邓肯的回答是对的。应该是这样的@安迪：你用什么来调试？如果您在浏览器中出现语法输入错误或javascript控制台错误，您应该有一个transpilation错误。React错误几乎从不沉默。@Okazari我没有一个传输错误，它会通过Gulp自动传输，但在这种情况下，我也使用babejs进行了双重检查，但仍然无法打印任何内容，因为我没有.isNumber函数。好吧，如果因为javascript中不存在isNumber，您应该尝试使用typeof cell=='number'。我很惊讶你的javascript浏览器控制台中没有任何错误。嘿@Duncan Thacker，不幸的是，我得到的结果与上面描述的相同。只是空白的一页。应用程序根本没有渲染。但我会考虑一下你的建议。我想我需要一个新函数isNumber。谢谢！啊，对不起，我通常用洛达斯的。邓肯的回答是对的。应该是这样的@安迪：你用什么来调试？如果您在浏览器中出现语法输入错误或javascript控制台错误，您应该有一个transpilation错误。React错误几乎从不沉默。@Okazari我没有一个传输错误，它会通过Gulp自动传输，但在这种情况下，我也使用babejs进行了双重检查，但仍然无法打印任何内容，因为我没有.isNumber函数。好吧，如果因为javascript中不存在isNumber，您应该尝试使用typeof cell=='number'。我很惊讶您的javascript浏览器控制台中没有任何错误。