Question

我必须在不同的功能中使用setState()。关键是，我使用不同的值操纵相同的状态属性（'test'，'options'），具体取决于当前状态或用例，并调用其他内部函数（this.doSomething()）。问题出在function1()，我将一个接一个地调用所有函数。我怎样才能保证'this.state.test' === '2'中的条件function3()是真的？

我知道，setState()处于异步状态并且有一个回调函数，但是如果在我的设置中有多个函数，我怎么能使用这个回调？我不想使用任何“回调地狱”，并想知道是否有任何优雅的方式来实现这一目标...

亲切的问候

function1() {
  ...
  this.function2();
  this.function3();
  this.function4();
  ...
}

function2() {
  this.doSomething();
  this.setState({
    options: 'abc',
    test: '2'
  });
  ...
}

function3() {
  this.doSomethingElse();
  if (this.state.test === '2') {
    this.setState({
      options: 'def'
      test: '3'
    });  
  }
  ...
}

function4() {
  this.doAnything();
  this.setState({
    options: 'xyz',
    test: '4'
  });
  ...
}

Answer 1

您可以在完成时使用承诺或回调。

回调示例（在ES6中）：

function1() {
  ...
  this.function2(() => this.function3(() => this.function4()));
  ...
}

function2(callback) {
  this.doSomething();
  this.setState({
    options: 'abc',
    test: '2'
  }, callback);
  ...
}

function3(callback) {
  this.doSomethingElse();
  if (this.state.test === '2') {
    this.setState({
      options: 'def'
      test: '3'
    }, callback);  
  }
  ...
}

function4(callback) {
  this.doAnything();
  this.setState({
    options: 'xyz',
    test: '4'
  }, callback);
  ...
}

setState（）在不同的函数调用

1 个答案: