Question

我遇到了一个问题，即水平排序获取的API数据的列。我正在尝试将从API获取的数据打印到表中。无论如何，行都是水平打印好的，但是我用于行this.state.data.map（）的函数对于列的作用方式并不相同。我认为它是ES6的标准，但我不确定。 Here is my printed issue.

这是我的代码示例：

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> {
                        this.state.columns.map(( column ) => (
                            <tr>

                                <th>{column[0]}</th>
                                <th>{column[1]}</th>
                                <th>{column[2]}</th>
                                <th>{column[3]}</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>
                                    </tr>
                                ) )
                            }
                            </tbody>
                        </table>
                    </div>
        )
    }
}


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

如果我为“第三次拍摄”赋予价值，我就可以打印出黑暗的照片。元素，但我想动态打印它，以防API中的数据被更改。

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

Here is how looks like my example, when columns values has been hardcoded within 'th' elements.

任何建议都将不胜感激！

Answer 1

var data = {
columns: [
"Full name",
"Job title",
"Age",
"Bonus",
],
rows: [
[
"John Smith",
"team lead front-end",
30,
444.08,
],
[
"Tom Jones",
"front-end developer",
25,
333.3,
],
[
"Deborah Barnes",
"front-end developer",
21,
233.66,
],
[
"Isaac Roberson",
"technical support",
44,
353,
],
[
"Josh Brown",
"team lead back-end",
35,
353,
],
[
"Chester Mckinney",
"back-end developer",
33,
223.27,
],
[
"Ora Burton",
"back-end developer",
32,
192.92,
],
[
"Jim Brown",
"technical support",
19,
98.99,
],
],
}

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: []
        }
    }

    componentDidMount()
    {

     
             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>
                                    </tr>
                                ) )
                            }
                            </tbody>
                        </table>
                    </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

希望它可以提供帮助

Answer 2

不确定为什么要做列[0]，[1]，[2]和[3]。地图内的每列都是一个字符串。如果你做了列[0]，它将返回你的第一个字符，即你的情况。 Full名称，Job标题，Age Bonu将在您的第一张图片中呈现。列中的前四个字符。

我添加的key属性只是React要求提供唯一键并且与问题无关。

this.state.columns.map((column, index) => (
    <tr>
        <th key={"columns-" + index.toString()}>
            {column}
        </th>
    </tr>
))

ReactJS：如何水平渲染列

2 个答案: