Question

我有新的反应，所以我确定我错过了一些基本的东西。我没有为此定义，因此无法读取属性＆＃39; setState＆＃39;试图在调用fetch的函数返回时设置状态，我做错了什么？注意我从onClick调用MyAction，响应数据没问题。

var ItemComponent = React.createClass({

getInitialState: function() {
    return {
    the_message: "call that API!"
    };
},

doFetch: function() {
    var obj = {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
    }
    return fetch('http://localhost:1337/site/test', obj).then(function(response) {
    return response.json();
    }).then(function(data) {
    return data;
    }).catch((error) => {
    console.error(error);
    });
},

MyAction: function(){
    this.doFetch().then(function(response){
    this.setState({
        the_message: response.message
    });
    })
},

render: function() {
    return (
    <div>
    <div>{this.props.title}</div><br></br>
    <div>{this.props.price}</div><br></br>
    <div onClick={this.MyAction}>{this.props.qty}</div>
    </div>
    );
}

});

Answer 1

使用箭头功能（() => {}）保留最后一个范围（this）。

MyAction: function(){
    this.doFetch().then((response) => {
        this.setState({
            the_message: response.message
        });
    });
},

Answer 2

您的内心承诺解析功能不具备this上下文。一种解决方法：

MyAction: function(){
    this.doFetch().then(function(response){
        this.setState({
            the_message: response.message
        });
    }.bind(this))
},

在this StackOverflow question上了解详情。

Answer 3

简单的.bind(this)可以解决问题：

render: function() {
return (
<div>
<div>{this.props.title}</div><br></br>
<div>{this.props.price}</div><br></br>
<div onClick={this.MyAction.bind(this)}>{this.props.qty}</div>
</div>
);

通过添加.bind(this)，您可以将范围保留在您的函数中。

在函数内部反应setState这是未定义的

3 个答案: