다른 함수 호출 내에서 setState()

Question

다른 함수에서 setState()을 사용해야합니다. 요점은 현재 상태 또는 용도에 따라 다른 값으로 동일한 상태 속성 ('test', 'options')을 조작하고 다른 내부 함수 (this.doSomething())를 호출한다는 것입니다. 문제는 모든 기능을 차례로 호출하는 function1()에 있습니다. function3()의 'this.state.test' === '2'이 얼마나 이상하다고 보증 할 수 있습니까?

알고 계시 겠지만 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); 
    ... 
}