Question

我想在Parent调用作为道具传递的函数时刷新ChildForm组件的状态。我的组件结构如下。

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时，记录在db上成功更新，但是我收到this.getThings()不是函数且Parent组件未更新的错误。如何在Parent上触发状态更新？

编辑：抱歉，我忘了在this.handleUpdate = this.handleUpdate.bind(this);构造函数中显示ChildForm。

Answer 1

发生了什么

虽然您已将this.updateThing传递给<ChildForm />，但在update的{{1}}中调用此函数时，上下文已更改，从而导致{{1} } {} {}} {/ p>

如何修复

在ChildForm中调用函数时，使用bind替换this。

来自MDN的报价：

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

因此，请尝试使用<ChildForm />

替换undefined

使用作为prop传递给Child的函数更新父状态

1 个答案:

发生了什么

如何修复