Вернуться к функции вызывающего только после завершения setState

Question

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

state={
  a: false,
  b: false
}

function1 = () =>{
  this.setState({a: true});
  //do something over here to wait until setState finishes
  //and then return to caller function
}

function2 = () =>{
    this.setState({b: true});
   //do something over here to wait until setState finishes
   //and then return to caller function
}


function3 = () =>{
  function1();
  function2();
  if(this.state.a && this.state.b === true){
      //perform something
  }
}

Если я вызываю function3() при нажатии кнопки, я не получаю желаемый результат, поскольку состояние a и b не меняется на true. Как мне //perform something после обновления состояния?

Заранее спасибо.

Answer 1

Если я правильно понял, вы хотите выполнить как function1, так и function2, а затем выполнить проверку. Поскольку setState является асинхронным, вы можете использовать опцию обратного вызова для разрешения обещания для каждой функции, а затем на function3 дождитесь разрешения обоих обещаний, а затем выполните проверку.

См. Этот пример :

state={
  a: false,
  b: false
}

function1 = () => {
  return new Promise((resolve, reject) => {
    this.setState({a: true}, () => resolve());
    //do something over here to wait until setState finishes
    //and then return to caller function
  }
}

function2 = () => {
  return new Promise((resolve, reject) => {
    this.setState({b: true}, () => resolve());
    //do something over here to wait until setState finishes
    //and then return to caller function
  }
}


function3 = () =>{
  Promise.all([function1(), function2()]).then(() => {
    if(this.state.a && this.state.b === true){
      //perform something
    }
  });
}

Надеюсь, это поможет!

Answer 2

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

 state={
  a: false,
  b: false
}

function1 = () =>{
  this.setState({a: true}, this.function3);
}

function2 = () =>{
    this.setState({b: true}, function3);
}


function3 = () =>{
  if(this.state.a && this.state.b === true){
      // Do what you want 
  }
}

Answer 3

setState функция обратного вызова - это то, что вам здесь нужно:

Согласно вашему коду, я бы предложил это

state={
  a: false,
  b: false
}

function1 = () =>{
    this.setState({a: true},() => {
        //when setState finishes
        this.checkState();
    });
}

function2 = () =>{
    this.setState({b: true},() => {
        //when setState finishes
        this.checkState();
    });
}


function3 = () =>{
    function1();
    function2();
}

checkState() {
    if(this.state.a && this.state.b === true){
        //perform something
    }
}

Answer 4

Не уверен, понимаю ли я вашу проблему, но setState() принимает функцию обратного вызова, которая, если вызывается после обновления этого состояния, поэтому для вашего примера вы можете упростить ее следующим образом:

state = {
  a: false,
  b: false
}

function1 = () => {
  this.setState({a: true}, this.function3);
}

function2 = () => {
    this.setState({b: true}, this.function3);
}


function3 = () => {
  if(this.state.a && this.state.b === true){
      //perform something
  }
}

Проверить out этот пример при использовании обратного вызова setState.