Question

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

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

使用

PBS_ARRAYID

在渲染功能中。 PBS_ARRAYID实际上并不返回数组

Answer 2

我修好了，你需要使用MAP而不是FOR FOR EACH，希望这有助于某人！

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**.map**(function (invoice) {
                        console.log("in");
                        console.log(invoice);
                        return (
                            <tr **key = {invoice.number}**>
                                <td>{invoice.number}</td>
                                <td>1231</td>
                                <td>4</td>
                                <td>A Task</td>
                            </tr>
                        );
                    })
                }
                </tbody>
            </table>
        );
    }

}

export default InvoicePickTable;

Answer 3

here是使用ajax和map函数呈现数据的一个很好的示例。

React不呈现AJAX数据

3 个答案: