プロミスの解決後のコンポーネントの状態の変更

Question

プロビジョニングが解決された後、コンポーネントの状態を変更したい（ネイティブに反応する）。

ここ

が私のコードです：

class Greeting extends Component{ 

    constructor(props){ 
     super(props); 

     this.state = {text: 'Starting...'}; 

     var handler = new RequestHandler(); 
     handler.login('email','password') 
     .then(function(resp){ 
      this.setState({text:resp}); 
     }); 
    } 

    render(){ 
     return (
      <Text style={this.props.style}> 
       Resp: {this.state.text} 
      </Text> 
     ); 
    } 
} 

しかしときの約束の解決、それは次のようなエラーがスローされます。

this.setState is not a function 
TypeError: this.setState is not a function 
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1510:6 
    at tryCallOne (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:25187:8) 
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:25273:9 
    at JSTimersExecution.callbacks.(anonymous function) (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:8848:13) 
    at Object.callTimer (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:8487:1) 
    at Object.callImmediatesPass (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:8586:19) 
    at Object.callImmediates (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:8601:25) 
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7395:43 
    at guard (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7288:1) 
    at MessageQueue.__callImmediates (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7395:1) 

約束が解決された後、私は現在のコンポーネントの状態を変更するにはどうすればよいですか？

Answer 1

コールバックにはを使用しているオブジェクトと異なるコンテキストがです。このため、thisはあなたの意見ではありません。あるいは、

constructor(props){ 
    super(props); 

    this.state = {text: 'Starting...'}; 

    var handler = new RequestHandler(); 
    handler.login('email','password') 
     .then(resp => this.setState({text:resp})); 
} 

---

bind()を使用して手動で関数コンテキストを設定します。これを解決するために

---

、あなたは周囲の状況を維持している、arrow functionを使用することができます

constructor(props){ 
    super(props); 

    this.state = {text: 'Starting...'}; 

    var handler = new RequestHandler(); 
    handler.login('email','password') 
     .then(function(resp){ 
      this.setState({text:resp}); 
     }.bind(this)); 
} 

Answer 2

新しい構文を使用する方が良いです。詳細はこちらhttps://babeljs.io/blog/2015/06/07/react-on-es6-plus

class Greeting extends Component{ 
    state = { 
     text: 'Starting...', 
    } 

    componentDidMount() { 
     var handler = new RequestHandler(); 
     handler.login('email','password') 
     .then((text) => { 
      this.setState({ text }); 
     }) 
    } 

    render(){ 
     return (
      <Text style={this.props.style}> 
       Resp: {this.state.text} 
      </Text> 
     ); 
    } 
}