使用作为prop传递给Child的函数更新父状态(Updating Parent state with function passed as prop to Child)

 一旦ChildForm调用作为道具传递的函数，我想刷新Parent组件的状态。 我的组件结构如下。 
 
class Parent extends React.Component {
    constructor() {
        super();
        this.state = {data: []};
    }

    getThings() {
        //Working ajax get request for data
    }

    updateThing(obj){
        $.ajax({
          url: `/api/update/${obj.identifier}`,
          dataType: 'json',
          type: 'POST',
          data: obj,
          success: (res) => {
              this.getThings();
          },
          error: (xhr, status, err) => {
            console.error(`/api/update/${obj.identifier}`, status, err.toString());
          }
        });
    }

    componentDiMount() {
        this.getThings();
    }

    render() {
        let childForms = this.state.data.map((x, i) => {
            return (
                <ChildForm key={i} id={`thing${i}`} {...x} update={this.updateThing} />
            );
        });
        let dataVisuals = this.state.data.map((x, i) => {
            return (
                <DataViz key={i} {...x} />
            );
        });
        return (
            <div>
                {dataVisuals}
                {childForms}
            </div>
        );
    }
}

class ChildForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {...props};
        this.handleUpdate = this.handleUpdate.bind(this);
    }
    handleInputChange() {
        ///working input functionality to update form state
    }
    handleUpdate() {
        let obj = {...this.state};
        this.props.update(obj);
    }
    render() {
        //Form for updating individual thing
    }
}
 
 当ChildForm调用this.props.update时，记录在数据库上成功更新，但出现this.getThings()不是函数并且Parent组件未更新的错误。 我如何触发Parent的状态更新？ 
 
 编辑 ：对不起，忘了表明，我有this.handleUpdate = this.handleUpdate.bind(this); 在ChildForm构造函数中。 

I want to refresh the Parent Component's state once ChildForm invokes a function passed as a prop. My component is structured like below. 
 
class Parent extends React.Component {
    constructor() {
        super();
        this.state = {data: []};
    }

    getThings() {
        //Working ajax get request for data
    }

    updateThing(obj){
        $.ajax({
          url: `/api/update/${obj.identifier}`,
          dataType: 'json',
          type: 'POST',
          data: obj,
          success: (res) => {
              this.getThings();
          },
          error: (xhr, status, err) => {
            console.error(`/api/update/${obj.identifier}`, status, err.toString());
          }
        });
    }

    componentDiMount() {
        this.getThings();
    }

    render() {
        let childForms = this.state.data.map((x, i) => {
            return (
                <ChildForm key={i} id={`thing${i}`} {...x} update={this.updateThing} />
            );
        });
        let dataVisuals = this.state.data.map((x, i) => {
            return (
                <DataViz key={i} {...x} />
            );
        });
        return (
            <div>
                {dataVisuals}
                {childForms}
            </div>
        );
    }
}

class ChildForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {...props};
        this.handleUpdate = this.handleUpdate.bind(this);
    }
    handleInputChange() {
        ///working input functionality to update form state
    }
    handleUpdate() {
        let obj = {...this.state};
        this.props.update(obj);
    }
    render() {
        //Form for updating individual thing
    }
}
 
When ChildForm invokes this.props.update, The record updates successfully on the db, but I get an error that this.getThings() is not a function and the Parent component is not updated. How can I trigger the state update on Parent?
 
EDIT: Sorry, forgot to show that I had this.handleUpdate = this.handleUpdate.bind(this); in ChildForm constructor.

原文：https://stackoverflow.com/questions/42327759