在承诺解析后修改组件状态

Modify component state after a promise resolve

本文关键字：修改 组件 状态 承诺      更新时间：2023-09-26

我想在承诺被解析后修改组件的状态(react native)

下面是我的代码: 
    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>
        );
    }
}

但是当promise解析时，会抛出以下错误:

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)

如何在承诺被解决后改变当前的组件状态?

回调具有与您正在处理的对象不同的上下文。因此，this不是你想的那样。

要解决这个问题，您可以使用箭头函数，它保留周围的上下文:

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

或者，使用bind()手动设置函数上下文:

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));
}

最好使用新的语法。更多信息请点击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>
        );
    }
}
相关文章：