Controlador de envío, Reaccionar Axios: Post y Get en el mismo controlador

0

Pregunta

Estoy tratando de crear una aplicación web que carga el archivo y se adjunta el usuario actual en el archivo de modelo como una clave externa. Por alguna razón la solicitud get es ser eliminada, pero inicialmente no obtener la información necesaria.

  handleSubmit = (e) => {
    e.preventDefault();
    axios.get('http://127.0.0.1:8000/core/current_user/', {
      headers: {
        Authorization: `JWT ${localStorage.getItem('token')}`,
      }
    }).then((user) => {

      this.state.creator = user.data;
      console.log(this.state.creator);
    })  
    console.log(this.state.creator);
    let form_data = new FormData();
    form_data.append('creator', this.state.creator);
    form_data.append('file', this.state.file);
    form_data.append('title', this.state.title);
    form_data.append('description', this.state.description);
    axios.post('http://localhost:8000/core/posts/', form_data, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: `JWT ${localStorage.getItem('token')}`,
      }
    }).then(res => {
        console.log(res.data);
      }).catch(err => console.log(err))
  };

La 1ª consola está devolviendo la información del usuario, pero la 2ª consola devuelve null. Cualquier ayuda será muy apreciada.

api axios javascript react-native
2021-11-23 22:41:32
1

Mejor respuesta

1

Su then declaración después de que el original get termina en la línea 11, y el resto de su código está fuera de eso.

Con el código asincrónico, el código fuera de la then bloque seguirá funcionando mientras se está a la espera de una respuesta, por lo que this.state.creator no se han establecido todavía. A continuación, volverá a la de código dentro de la then bloque una vez que la promesa se resuelve.

Usted necesita para mover todo el segundo bloque de código dentro de la inicial then bloque, por lo que sólo se ejecuta una vez una respuesta a la original get la solicitud ha vuelto:

handleSubmit = (e) => {
  e.preventDefault();
  axios
    .get('http://127.0.0.1:8000/core/current_user/', {
      headers: {
        Authorization: `JWT ${localStorage.getItem('token')}`,
      },
    })
    .then((user) => {
      this.state.creator = user.data;
      console.log(this.state.creator);
      let form_data = new FormData();
      form_data.append('creator', this.state.creator);
      form_data.append('file', this.state.file);
      form_data.append('title', this.state.title);
      form_data.append('description', this.state.description);
      axios
        .post('http://localhost:8000/core/posts/', form_data, {
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `JWT ${localStorage.getItem('token')}`,
          },
        })
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => console.log(err));
    });
};
2021-11-24 00:46:59

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................