如何通过 props 将 AJAX 数据传递给 child

Question

我正在尝试创建两个 table，我可以在其中将数据拉入 parent 组件，将数据传递到一个 table，并允许从一个 table 移动数据=36=] 给另一个。所以我需要能够为所有 AJAX 数据提供一个 table，然后为选定数据提供一个。我无法通过 props 传递数据，因为一旦 AJAX 请求完成，child 就不会更新。（基本上 parent 组件观察并共享两个 children 之间的数据。）

我已经尝试了文档中的 "WillReceive" 和 "WillUpdate" 样式方法，但从未调用过它们，我尝试更新状态

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

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.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>

    );
}

这是我的child

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;

Answer 1

诀窍不是直接在父级中操作状态，而是使用 setState({}) 函数。

Answer 2

要更新状态，您必须使用 setState() 函数，请试试这个：

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


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

如何通过 props 将 AJAX 数据传递给 child

How to pass AJAX data to child through props

state

reactjs