ReactJS：如何动态呈现行

Question

我面临动态排序获取的 API 数据行的问题，即如果 API 中的行数据更改（+/- 行）以自动呈现它。我正在尝试将从 API 中获取的数据打印到 table 中。无论如何，列动态打印得很好，但是我对列使用的函数 this.state.columns.map(( column, index ) => 对行的作用不同。我想我误导了 ES6 标准, 但我不确定。Here is how it's look like, if the rows are not hardcoded.

这是我的代码示例：

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="table">
                    <thead>
                        <tr> {
                            this.state.columns.map(( column, index ) =>
                            {
                                return ( <th>{column}</th> )
                            }
                            )
                        }
                        </tr>
                    </thead>
                    <tbody> {
                        this.state.rows.map(( row ) => (
                            <tr>
                                <td>{row[0]}</td>
                                <td>{row[1]}</td>
                                <td>{row[2]}</td>
                                <td>{row[3]}</td>
                                <td>{row[4]}</td>
                                <td>{row[5]}</td>
                                <td>{row[6]}</td>
                                <td>{row[7]}</td>
                                <td>{row[8]}</td>
                                <td>{row[9]}</td>
                                <td>{row[10]}</td>
                                <td>{row[11]}</td>
                                <td>{row[12]}</td>
                                <td>{row[13]}</td>
                                <td>{row[14]}</td>
                                <td>{row[15]}</td>
                            </tr>
                        ) )
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}


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

相反，如果我给 'td' 元素赋值，我能够打印硬编码的行，但我想动态打印它，以防 API 中的数据已被删除改变了。

欢迎您直接为我的回购做出贡献：Fetching API data into a table

Here is how looks like my example, when the rows values has been hardcoded within 'td' elements.

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

Answer 1

正如您迭代列和行一样，您可以添加一个额外的循环来迭代行单元格。例如：

this.state.rows.map(row => (
  <tr>{row.map(cell => (
    <td>{cell}</td>
   ))}
  </tr>
))

请注意，您可能想添加一个 key prop:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

ReactJS：如何动态呈现行

ReactJS: How to render rows dynamically

javascript

reactjs

babeljs

fetch-api