如何使用Map函数在ReactJS中显示表行

时间:2018-02-21 17:30:04

标签: javascript reactjs

我正在使用ReactJS来显示表格。该表的行是从数据库中获取的。我只能显示要显示的行,但添加一个额外的{object.title}会返回一个未定义对象的错误。这是我的代码:

tabRow(){
        if(this.state.products instanceof Array){
            const roles = this.state.products.map((object, i) =>
                <td>{object.id}</td>,
                <td>{object.title}</td>
            );
            return (
              <tr>{roles}</tr>
            );

        }
    }


    render(){
        return (
            <div>
                <h1>Products</h1>


                <div className="row">
                    <div className="col-md-10"></div>
                    <div className="col-md-2">
                        <Link to="/add-item">Create Product</Link>
                    </div>
                </div><br />


                <table className="table table-hover">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Product Title</td>
                        <td>Product Body</td>
                        <td width="200px">Actions</td>
                    </tr>
                    </thead>
                    <tbody>
                        {this.tabRow()}
                        {console.log(this.tabRow())}
                    </tbody>
                </table>
            </div>
        )
    }

0 个答案:

没有答案