#javascript #reactjs #react-native #api #axios
Вопрос:
Я пытаюсь создать веб-приложение, которое загружает файл и прикрепляет текущего пользователя к файловой модели в качестве внешнего ключа. По какой-то причине запрос get стирается, но он изначально получает необходимую информацию.
handleSubmit = (e) =gt; { e.preventDefault(); axios.get('http://127.0.0.1:8000/core/current_user/', { headers: { Authorization: `JWT ${localStorage.getItem('token')}`, } }).then((user) =gt; { 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 =gt; { console.log(res.data); }).catch(err =gt; console.log(err)) }; 1 — я консоль возвращает информацию о пользователе, но 2-я консоль возвращает значение null. Любая помощь будет очень признательна.
Ответ №1:
Ваше then утверждение после оригинала get заканчивается в строке 11, а остальная часть вашего кода находится за пределами этого.
При использовании асинхронного кода код за пределами then блока будет продолжать выполняться, пока он ожидает ответа, поэтому this.state.creator он еще не будет задан. Затем он вернется к коду внутри then блока, как только обещание будет выполнено.
Вам нужно переместить весь второй блок кода внутрь внутреннего then блока, чтобы он выполнялся только после возврата ответа на исходный get запрос:
handleSubmit = (e) =gt; { e.preventDefault(); axios .get('http://127.0.0.1:8000/core/current_user/', { headers: { Authorization: `JWT ${localStorage.getItem('token')}`, }, }) .then((user) =gt; { 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) =gt; { console.log(res.data); }) .catch((err) =gt; console.log(err)); }); };