javascript - React 不渲染 AJAX 数据

Question

我正在尝试使用react将数据加载到表中，并且在尝试渲染片段时数据确实存在，但是，它似乎并没有真正更新dom和渲染(我测试过并且当它运行 tbody 下的 {} block 中的片段时，知道数据确实存在。任何帮助都会很棒，谢谢。

import React from 'react';

class InvoicePickTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {invoices:[]};
    }

    getInvoiceData(){
        return new Promise(function(resolve, reject) {
            console.log("hi");
            resolve([{number: "1"},{number: "2"},{number: "3"}]);
        })

    }
    componentDidMount() {
        const self = this;
        self.getInvoiceData()
        .then((response) => {
            self.setState({invoices: response});
        })
        .catch((err) => {
            console.error(err);
        });
    }
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Task Price</th>
                        <th>Balance</th>
                        <th>Task Name</th>
                    </tr>
                </thead>
                <tbody>
                {

                    this.state.invoices.forEach(function (invoice) {
                        console.log("in");
                        console.log(invoice);
                        return (
                            <tr>
                                <td>{invoice.number}</td>
                            </tr>
                        );
                    })
                }
                </tbody>
            </table>
        );
    }

}

export default InvoicePickTable;

Answer 1

使用

this.state.invoices.map(invoice => <tr><td>{invoice.number}</td></tr>)

在你的渲染函数中。 Array.forEach 实际上并不返回数组