ReactJS：如何使用 toFixed(2) 修复数字行值长度

Question

我将从 API 中获取的数据打印到 table 中，但我在将行数值固定为小数时遇到了一些困难。如果 API 中的行数据由数值组成，即 10.0, 333, 8 or 100 等，最后用十进制值呈现它 -> 10.00, 333.00, 100.00。

我熟悉的功能 .toFixed(2)，在 React 中的功能与我以前在 [=56= 中编写的功能不同].我认为我误导了 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) 修复数字行值长度

ReactJS: How to fix numerical rows values length with toFixed(2)

javascript

tofixed

reactjs

fetch-api