反应不渲染AJAX数据

Question

I am attempting to load data into a table using react, and I got to the point where the data does exist when attempting to render the fragment, however, it doesn't seem to actually update the dom and render (I tested and know the data DOES in fact exist when it runs the fragment in the {} block under tbody. Any help would be awesome, thank you.

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

Use

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

in your render function. Array.forEach does not actually return an array