提交處理程序，React Axios：在同一個處理程序中發布和獲取

Question

我正在嘗試創建一個 web 應用程序，該應用程序上傳文件並將當前用戶附加到文件 model 作為外鍵。 由於某種原因，get 請求正在被擦除，但它最初確實獲得了所需的信息。

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

第一個控制台返回用戶信息，但第二個控制台返回 null。 任何幫助將不勝感激。

Answer 1

原始get之后的then語句在第 11 行結束，並且代碼的 rest 不在此范圍內。

使用異步代碼， then塊之外的代碼將在等待響應時繼續運行，因此尚未設置this.state.creator 。 然后，一旦 promise 解析，它將返回到then塊內的代碼。

您需要將所有第二個代碼塊移動到 intial then塊中，以便僅在對原始get請求的響應返回后才執行它：

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