Реагировать - как перенаправить путь после завершения запроса POST с использованием fetch - PullRequest
Новая
       55

Реагировать - как перенаправить путь после завершения запроса POST с использованием fetch

0 голосов
/ 12 ноября 2019

Я пытаюсь перенаправить на другой путь ПОСЛЕ завершения запроса POST с использованием fetch.

Я установил переменную в своем состоянии, чтобы отслеживать после завершения функции POST

this.state.successfulPOST: false

, и я условный рендеринг, так что если я this.state.successfulPOST: true,мой редирект обрабатывается

Проблема в том, что мое перенаправление происходит до моего запроса POST. Как я могу сделать так, чтобы мой POST-запрос для /api/account/update/ был завершен, а затем обработать мой редирект для моего GET-запроса по этому пути /checkout/shippingaddress?

Вот мой полный код: 

import React, { Component } from "react";
import "whatwg-fetch";
import cookie from "react-cookies";
import { Redirect } from 'react-router-dom';

class GuestEmailForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      successfulPOST: false,
    };
  }

  updateGuestEmail = (data) => {

    const endpoint = "/api/account/update/"; 
    const csrfToken = cookie.load("csrftoken");

    if (csrfToken !== undefined) {
      let lookupOptions = {
        method: "POST",
        redirect: 'follow',
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": csrfToken
        },
        body: JSON.stringify(data),
        credentials: "include"
      };
      fetch(endpoint, lookupOptions)
        .then(response => {
          return response.json();
        })
        .then(responseData => {
          this.setState({email: responseData.email})
        })
        .then( 
          this.setState({successfulPOST: true})
          )
        .catch(error => {
          console.log("error", error);
          alert("An error occured, please try again later.");
        });
    }
  };


  handleEmailChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    let data = this.state;

    if (data !== undefined){
        (
          this.updateGuestEmail(data),
          console.log(this.state.email)
        )
    } else {
        ""
    }
  };

  resetSucessfulPOST = () => {
      this.setState({
        successfulPOST: false,
      })
  }


  componentDidMount() {
    this.resetSucessfulPOST()
  }

  render() {

    const {email, successfulPOST} = this.state

    // redirect to shipping page after successful POST of email
    if (successfulPOST === true)  

      return <Redirect push to={{ pathname: '/checkout/shippingaddress'}} />

    else

      return (
        <form onSubmit={this.handleSubmit}>
          <div>            
              <label>
                  Guest Email:
                  <input 
                          className="input" 
                          type="email" 
                          name="email"
                          value={email} 
                          onChange={event => {
                              this.handleEmailChange(event);
                            }}
                          />
              </label>
              <button className="btn btn-primary">Submit</button>

              </div>

        </form>
    );
  }
}

export default GuestEmailForm;

Заранее большое спасибо!

Ответы [ 2 ]

0 голосов
/ 13 ноября 2019

Так что мне удалось выяснить проблему.

вместо этого .then(this.setState({successfulPOST: true}))

это должно быть так: .then(responseData => {this.setState({successfulPOST: true,});})

получится, если вы неt передача аргумента в .then() аспект обещания не работает, и мой setState вызывается немедленно.

0 голосов
/ 12 ноября 2019

Сначала вы должны удалить метод componentDidMount(), затем вы будете 

setState({successfulPOST: true})

в конце метода updateGuestEmail, затем он будет перерисован и в соответствии с вашими условиями он будет перенаправлен ..

...