Как я могу приостановить функцию, пока ответ не вернется и состояние не будет установлено - PullRequest
Новая
       18

Как я могу приостановить функцию, пока ответ не вернется и состояние не будет установлено

2 голосов
/ 23 мая 2019

Я запускаю функцию с вызовом API, который возвращает ответ, который я использую для установки состояния, а затем запускает другую функцию, которая использует только что обновленное состояние. проблема в том, что вторая функция работает до того, как ответ возвращается и обновляет состояние

Я пытался. Тогда я думал, что должно работать 

import React from "react";
import API from "../../utils/API"
class Content extends React.Component {
    state={
        postID:"",
        statusPost:""
    }

    submitPost = () => {
        API.savePost({
            content: this.state.statusPost,
            post_by: this.props.userInfo.firstname + this.props.userInfo.lastname
        })
        .then(console.log(this.submitPost))
        .then(res => {

            this.setState({ postID:res.data._id })

            console.log(this.state)
        })
            .then(this.addPostID())
            .catch(err => console.log(err));

    }


    addPostID = () => {

    API.postID({
        _id:  this.props.userInfo.user_ID,
        post:this.state.postID
      })

      .then(res => console.log(res))
      .catch(err => console.log(err));

    }
}

1 Ответ

1 голос
/ 23 мая 2019

Проблема здесь в том, что setState является асинхронным само по себе.Лучше использовать для рендеринга компонента React на основе изменений состояния, но не для передачи данных между вызовами функций.Поэтому лучше выполнить рефакторинг кода таким образом: 

submitPost = () => {
    API.savePost({
        content: this.state.statusPost,
        post_by: this.props.userInfo.firstname + this.props.userInfo.lastname
    })
    .then(console.log(this.submitPost))
    .then(res => {

        this.setState({ postID:res.data._id })

        console.log(this.state)
        this.addPostID(res.data._id); // As state will not be updated on this point
    })
        .catch(err => console.log(err));
}

addPostID = (postID) => {

API.postID({
    _id:  this.props.userInfo.user_ID,
    post:postID // Use argument and not state here
  })

  .then(res => console.log(res))
  .catch(err => console.log(err));

}

Альтернативным подходом к этой проблеме может быть использование второго аргумента функции setState, которая является обратным вызовом, который будет вызываться после обновления состояния.

Например 

this.setState({ postID:res.data._id }, () => this.addPostID()); // Now addPostId will be called after state updated
...