Question

我面临着一个问题，即动态地对所获取的API数据的行进行排序，即如果API中的行数据被更改（+/-行）以自动呈现它。我正在尝试将从API获取的数据打印到表中。无论如何这些列都是动态打印的，但是我用于列的函数this.state.columns.map（（column，index）=＆gt;对于行没有相同的功能。我想我我误导了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：

键帮助React识别哪些项目已更改，已添加或已添加除去。键应该给予数组内的元素元素稳定的身份

ReactJS：如何动态呈现行

1 个答案: