Аксиоса вызывают, но не в моем обработчике событий - PullRequest
Новая
       7

Аксиоса вызывают, но не в моем обработчике событий

0 голосов
/ 13 июня 2018

У меня странная ситуация, когда мой AXIOS-вызов AXIOS выполняется, даже если он выполняется в обработчике событий.Процесс выглядит следующим образом.

У меня есть ящик материалов и пользовательский интерфейс, в котором есть элемент списка, который заменяет компонент на моей главной странице.Этот компонент имеет кнопку отправки, которая выполняет вызов Axios API REST, но он вызывается в обработчике событий из 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: 

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>
    )
}

EDITED Кроме того, у меня есть ListItemна моем ящике.Это где звонок делается.

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

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

Мне интересно, вызывает ли тот факт, что я использую обработчик реквизита, отправку какого-либо события моим детям (фактический компонент, который имеет это событие)?

1 Ответ

0 голосов
/ 13 июня 2018

Это связано с тем, как вы вызываете this.props.onClick внутри вашего <Button/> компонента.Вероятно, то, что вы делаете внутри <Button/> компонента, выглядит примерно так onClick={this.props.onClick()}.Делая это, вы вызываете функцию из-за ().

Вместо этого вы можете просто передать ссылку на функцию handleSubmit, выполнив onClick={this.props.onClick} внутри компонента <Button/>.

Если вы решите обернуть handleSubmit с помощьюФункция стрелка, вы будете создавать новую функцию каждый раз, когда компонент рендерится.onClick={() => this.handleSubmit()}.

В этом последнем сценарии вам нужно будет использовать () для запуска функции.Сделайте это только один раз: либо с this.handleSubmit() или this.props.onClick(), но не с обоими.

Надеюсь, что это работает для вас!

...