Question

我正在将从API获取的数据打印到表中，并且在将行数值修改为小数时遇到一些困难。如果API中的行数据由数值组成，即 10.0, 333, 8 or 100 等，则最后用十进制值渲染它 - ＆gt;的 10.00, 333.00, 100.00 即可。

我熟悉 .toFixed(2) 的函数在React中的功能不同，就像我以前在javaScript中编写代码一样。我认为我误导了ES6标准，但我不确定。如果我避免使用 .toFixed(2) ，这就是它的样子。

以下是我的代码示例 rows.toFixed(2) ，但它运行不正常：

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' ) );

欢迎您直接参与我的回购：Fetching API data into a table

当使用.toFixed时，以下是我的示例：

很遗憾，我无法在ReactJs.org

找到相关文档

它不能与 rows[].length.toFixed(2) 一起使用。

任何建议将不胜感激！

Answer 1

你再次被称为toFixed(2) this.state.rows，这是一个数组 - 这可能会引发一个错误，导致渲染失败。这就解释了为什么你在屏幕上看不到任何东西。

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

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

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

Answer 2

向@Okazari致意的问候。这是技术上正确的答案，但不是逻辑上的：

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

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

ReactJS：如何使用toFixed（2）

2 个答案: