Reactjs 如何通过道具将AJAX数据传递给子级

我尝试创建两个表，在其中我可以将数据拉入父组件，将数据传递到一个表中，并允许将数据从一个表移动到另一个表中。因此，我需要能够为所有AJAX数据创建一个表，然后为所选数据创建一个表。我无法通过道具传递数据，因为一旦AJAX请求完成，子对象就不会更新。（基本上，父组件观察并在两个子组件之间共享数据。）

我在文档中尝试了“WillReceive”和“WillUpdate”样式的方法，但它们从未被调用，我尝试了更新状态

这是请求（我现在正在伪造数据）

这里是我使用req的地方

componentDidMount() {
    const self = this;
    self.getInvoiceData()
        .then((response) => {
            self.state.invoices = response;
            console.log(self.state);
        })
        .catch((err) => {
            console.error(err);
        })
}

这是我的稿子

render () {
    return (
        <div>
            <p>Selected:
                {
                    function() {return JSON.parse(this.selected)}
                }
            </p>
            <InvoicePickTable invoices = {this.state.invoices} selected = {this.selected} />
            <button>Move</button>
            <InvoiceSelectedTable selectedInvoices = {this.state.selectedInvoices} />
        </div>

    );
}

render（）{
返回(
选定：
{
函数（）{return JSON.parse（this.selected）}
}

移动
);
}

这是我的孩子

import React from 'react';

class InvoicePickTable extends React.Component {

    constructor(props) {
        console.log("constructor called");
        super(props);
        this.state = {invoices: []};
    }
    selectInvoice(invoice) {
        this.props.selected = invoice;
    }

    //never gets called
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps);
        console.log(nextState)
        console.log("eyy lmao");
        this.state.invoices = nextProps.invoices;
        this.state.hasDate = true;
    }
    //never gets called
    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        console.log("eyy lrofl");
        this.state.invoices = nextProps.invoices;
    }

    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Task Price</th>
                        <th>Balance</th>
                        <th>Task Name</th>
                        <th><button onClick={()=>{console.log(this.props);console.log(this.state)}}>props</button></th>
                    </tr>
                </thead>
                <tbody>
                {

                    this.props.invoices.map(function (invoice) {
                        console.log("in");
                        console.log(invoice);
                        return (
                            <tr key = {invoice.number} onClick={this.selectInvoice(invoice)}>
                                <td>{invoice.number}</td>
                            </tr>
                        );
                    })
                }
                </tbody>
            </table>
        );
    }

}

export default InvoicePickTable;

从“React”导入React；
类InvoicePickTable扩展React.Component{
建造师（道具）{
log（“调用的构造函数”）；
超级（道具）；
this.state={invoices:[]}；
}
选择发票（发票）{
this.props.selected=发票；
}
//从未接到过电话
组件将更新（下一步，下一步状态）{
console.log（nextrops）；
console.log（nextState）
控制台日志（“eyy lmao”）；
this.state.invoices=nextrops.invoices；
this.state.hasDate=true；
}
//从未接到过电话
组件将接收道具（下一步）{
console.log（nextrops）；
控制台日志（“eyy lrofl”）；
this.state.invoices=nextrops.invoices；
}
render（）{
返回(
发票#
任务价格
平衡
任务名称
{console.log（this.props）；console.log（this.state）}>props
{
this.props.invoices.map（函数（发票）{
控制台。登录（“登录”）；
控制台日志（发票）；
返回(
{发票号码}
);
})
}
);
}
}
导出默认发票选取表；

诀窍不是直接操作父级中的状态，而是使用setState（{}）函数。

诀窍不是直接操作父级中的状态，而是使用setState（{}）函数。

要更新状态，必须使用

setState（）

函数，请尝试以下操作：

 componentDidMount() {
        const self = this;
        self.getInvoiceData()
            .then((response) => {


                this.setState({
                    invoices : response
                 });
            })
            .catch((err) => {
                console.error(err);
            })
    }

---

要更新状态，必须使用

setState（）

函数，请尝试以下操作：

 componentDidMount() {
        const self = this;
        self.getInvoiceData()
            .then((response) => {


                this.setState({
                    invoices : response
                 });
            })
            .catch((err) => {
                console.error(err);
            })
    }