时间戳

首页 > 解决方案 > Axios 被调用但不在我的事件处理程序中

reactjs - Axios 被调用但不在我的事件处理程序中

问题描述

我有一个奇怪的情况，即使在事件处理程序中进行调用，我的 AXIOS ajax 调用仍在进行。流程如下。

我有一个 material-ui 抽屉，它有一个列表项，可以在我的主页上交换一个组件。这个组件有一个提交按钮，它可以对 REST API 进行 Axios 调用，但是当我单击提交时，它是在 ListItem 的事件处理程序上调用的。

这是一些代码：

handleSubmit() {
    // var apiBaseUrl = "http://localhost:4000/api/";
    const apiBaseUrl = "http://localhost:8000/";
    axios.defaults.withCredentials = true;
    const self = this;
    const payload = {
        "to": this.state.to + " " + this.state.toTime,
        "from": this.state.from + " " +this.state.fromTime
    };
    axios.defaults.xsrfCookieName = 'csrftoken';
    axios.defaults.xsrfHeaderName = 'X-CSRFToken';
    axios.post(apiBaseUrl + 'api/SaveSchedule/', payload, { headers: {'Accept': 'application/json'} } )
        .then ( (response)  => {
            if (response.status == 200) { }
            else if (response.status == 400) {
                console.log("");
            } else {
                console.log(" ");
                alert(" ");
            }
        })
        .catch(function (error) {
            if (error.response.status==400){
                alert("Check your credentials at arlo.netgear.com. Invalid email or password. ");
                console.log("Data:" + error.response.data);
                console.log("Status: " + error.response.status);
                console.log("Headers: " + error.response.headers);
                console.log("Error: "+ error);
            } else if (error.response) {
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log(error.request);
            }
        });
}

使成为：

render() {
    const { from, to } = this.state;
    const modifiers = { start: from, end: to };
    return (
        <div className="InputFromTo">
            ...
            <form noValidate autoComplete="off">
            <TextField
                id="starttime-placeholder"
                label="Start Time:"
                placeholder="Enter Start Time"
                margin="normal"
                />
            <TextField
                id="endtime-placeholder"
                label="End Time"
                placeholder="Enter End Time"
                margin="normal"
                /><br/>
                <Button variant="raised" color="primary" onClick={this.handleSubmit}>Save Schedule</Button>
            </form>
            ...
        </div>
    )
}

已编辑 此外，我的抽屉上有一个 ListItem。这是进行呼叫的地方。

  handleListSelect(event) {
    this.props.onDrawerSelect(event.target.value);
}

render() {
    return (
        <div>
            <ListItem button>
                <ListItemIcon>
                    <ScheduleIcon/>
                </ListItemIcon>
                <ListItemText primary="Scheduler" onClick={this.handleListSelect}/>
            </ListItem>

我想知道使用道具处理程序的事实是否会导致它向我的孩子（具有该事件的实际组件）发送某种事件？

标签： reactjsmaterial-ui

解决方案

这与您在组件this.props.onClick内部的调用方式有关<Button/>。可能您在<Button/>组件内部所做的事情是这样的onClick={this.props.onClick()}。通过这样做，您正在调用该函数，因为().

相反，您可以通过在组件内handleSubmit执行此操作来继续传递函数的引用。onClick={this.props.onClick}<Button/>

如果您决定handleSubmit使用箭头函数进行包装，您将在每次组件呈现时创建一个新函数。onClick={() => this.handleSubmit()}.

在最后一个场景中，您将需要使用()来触发该功能。只做一次：使用this.handleSubmit()或this.props.onClick()，但不能同时使用。

希望对你有用！

推荐阅读