Javascript 从React fetch调用组件方法

我有一个名为

SeanceManager

的

组件。在这个
组件中
我有一个
方法
，它使用
fetch
从后端请求数据

class SeanceManager extends React.Component {

    constructor(...args) {
        super(...args);

        this.state = {
            addSeanceModalShow: false,
            seances: [],
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleDeleteUser = this.handleDeleteUser.bind(this);
        this.fetchSeance = this.fetchSeance.bind(this);
    }

    componentDidMount() {
        this.fetchSeance()
    }



    fetchSeance = () => {
        fetch("/seances")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        addSeanceModalShow: false,
                        seances: result
                    });
                    console.log("Fetchime: "+this.state.seances);
                },

                (error) => {
                    this.setState({
                        addSeanceModalShow: true,
                        error
                    });
                }
            )
        console.log("l6pp: "+this.state.seances);
    }

    handleSubmit = (event, devices, interval, startDate, endDate) => {
        event.preventDefault();
        if (devices && interval && startDate && endDate) {
            var data = { devices: devices, interval: interval, startDate: startDate, endDate: endDate };
            fetch('/create', {
                method: 'post',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            }).then(function (response) {
                console.log(response)
                //TODO: Should handle here somehow ?
                // return response;
            }).then(function (data) {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

            // this.fetchSeance();
        }
    };

    handleDeleteUser = id => {
        fetch('/delete/'+id, {
            method: 'delete',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(id)
        }).then(function (response) {
            console.log("Kustumise response");
            console.log(response);
            //TODO: Should handle here somehow ?
            // return response;
        }).then(function (data) {
            // console.log(data);
        });
        this.fetchSeance();
        this.setState({state: this.state});
    };

    render() {
        let addSeanceModalClose = () => this.setState({ addSeanceModalShow: false });

        return (

            <MDBRow>
                <MDBCol className="col d-flex justify-content-center">
                    <MDBCard className="card col-md-6">
                        <MDBCardBody>
                            <div className="add-button-parent">
                                <MDBBtn className="add-button-child" color="cyan"
                                        onClick={() => this.setState({ addSeanceModalShow: true })}>
                                    Lisa uus seanss
                                </MDBBtn>
                            </div>

                            <form>
                                <AddSeanceFormModal
                                    show={this.state.addSeanceModalShow}
                                    handleSubmit={this.handleSubmit}
                                    onHide={addSeanceModalClose}
                                />
                                {/*{this.addToSeanceList()}*/}
                                <div className="card scrollbar-ripe-malinka ">
                                    <div className="row ">
                                        <div className="container-fluid">
                                            <div className="card-body">
                                                <h4 id="section1"><strong>Aktiivsed seansid</strong></h4>
                                                <Seances
                                                    handleDeleteUser={this.handleDeleteUser}
                                                    seances={this.state.seances} />

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
            </MDBRow>
        );
    }

};

export default SeanceManager;

如何从fetch中调用该方法？
您已经使用了

}).then(function (data) {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

当您应该使用箭头函数来保持
此
与外部范围相同时

}).then((data) => {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

再次更改：

}).then(function (data) {

致：

你用过

}).then(function (data) {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

当您应该使用箭头函数来保持
此
与外部范围相同时

}).then((data) => {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

再次更改：

}).then(function (data) {

致：

我想知道您的错误实际上是在handleSubmit方法（您没有显示）之内还是之后。如果handleSubmit为null，则实际错误应为“无法读取未定义的属性'handleSubmit'。您是否剪切并粘贴了准确的错误，或者您正在解释错误？可能handleSubmit尚未定义。但只要您在某个位置正确定义了handleSubmit，构造函数看起来就可以了。添加两条console.log消息或使用调试器确定未定义的内容，然后更新您的问题。.编辑了问题并添加了确切的错误，是的，handleSubmit定义正确。我一直在尝试使用console.logs，但到目前为止我还没有成功。这是一个完全不同的问题——没有任何代码，我看不出有人能帮上什么忙。您提供的代码甚至不包括字符串
fetchSeance
。我准备投反对票。。。请先做一点侦查工作。我想知道你的错误是在handleSubmit方法（你没有显示）之内还是之后发生的。如果handleSubmit为null，则实际错误应为“无法读取未定义的属性'handleSubmit'。您是否剪切并粘贴了准确的错误，或者您正在解释错误？可能handleSubmit尚未定义。但只要您在某个位置正确定义了handleSubmit，构造函数看起来就可以了。添加两条console.log消息或使用调试器确定未定义的内容，然后更新您的问题。.编辑了问题并添加了确切的错误，是的，handleSubmit定义正确。我一直在尝试使用console.logs，但到目前为止我还没有成功。这是一个完全不同的问题——没有任何代码，我看不出有人能帮上什么忙。您提供的代码甚至不包括字符串
fetchSeance
。我准备投反对票。。。请先做一点侦探工作。非常感谢，我在这件事上耽搁了很长时间。但是你能解释一下这两个函数之间的区别吗？只要在网上搜索
这个
和
箭头函数
，你就会找到它。即使如此，也有答案。另外：非常感谢，我在这个问题上坚持了很长一段时间。但是你能解释一下这两个函数之间的区别吗？只要在网上搜索
这个
和
箭头函数
，你就会找到它。即使如此，也有答案。也：