React Array.map 未填充表答案

【问题标题】：React Array.map not populating tableReact Array.map 未填充表
【发布时间】：2022-07-26 23:14:31
【问题描述】：

我有一个反应组件，它应该将传递给组件的一组项目作为道具并呈现一个表格。我已经用另一个组件成功地做到了这一点。但是由于某种原因，该表不想填充此组件中的行。

这里是渲染的组件：

class OrderList extends React.Component {
    constructor(props) {
        super(props);

        this.populateTable = this.populateTable.bind(this);
    }

    populateTable() {
        return this.props.orders.map((order) => {
            <tr key={order.id}>
                <td>{order.orderNo}</td>
                <td>{order.customer.name}</td>
                <td>{order.customerPO}</td>
                <td>{order.orderDate}</td>
                <td>{order.shipDate}</td>
            </tr>
        });
    }

    render() {
        return(
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <td>Order No.</td>
                        <td>Customer Name</td>
                        <td>Customer P.O.</td>
                        <td>Order Date</td>
                        <td>Ship Date</td>
                    </tr>
                </thead>
                <tbody>
                    {this.populateTable()}
                </tbody>
            </Table>
        );
    }
}

使用 react 开发工具，我可以看到 orders 属性确实包含正确的数据和对象数组。我什至可以在forEach 循环中加入console.log 行，所以我知道该组件实际上是在循环数据。但是，没有渲染行？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的地图没有返回任何内容，这就是原因

    class OrderList extends React.Component {
    constructor(props) {
        super(props);

        this.populateTable = this.populateTable.bind(this);
    }

    populateTable() {
        return this.props.orders.map((order) => (
            <tr key={order.id}>
                <td>{order.orderNo}</td>
                <td>{order.customer.name}</td>
                <td>{order.customerPO}</td>
                <td>{order.orderDate}</td>
                <td>{order.shipDate}</td>
            </tr>
        ));
    }

    render() {
        return(
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <td>Order No.</td>
                        <td>Customer Name</td>
                        <td>Customer P.O.</td>
                        <td>Order Date</td>
                        <td>Ship Date</td>
                    </tr>
                </thead>
                <tbody>
                    {this.populateTable()}
                </tbody>
            </Table>
        );
    }
}

当你在 map 中使用花括号时，你必须使用 return 关键字来返回任何东西

【讨论】：