1

我正在将从 API 获取的数据打印到表格中，并且在将行数值固定为小数时遇到了一些困难。如果 API 中的行数据由数值组成，即 ie10.0, 333, 8 or 100等，则最后以十进制值呈现它 -> 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' ) );

欢迎您直接向我的 Repo 投稿：Fetching API data into a table

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

在此处输入图像描述

不幸的是，我无法在ReactJs.org找到相关文档

它也不起作用rows[].length.toFixed(2)。

任何建议将不胜感激！

4

2 回答 2

4

你又被调用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)在渲染之前调用它 - 否则我们只渲染它。从技术上讲，这个答案是正确的，但它也会打印年龄行值，它不应该是小数。我想我必须对 rows[3] 值进行硬编码。

于 2017-12-07T15:59:13.040 回答
0

问候@Okazari 的建议。这是技术上正确的答案，但不合逻辑：

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

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

于 2017-12-07T16:38:08.833 回答