React setState внутри функции это не определено

Question

Я новичок, чтобы реагировать, поэтому я уверен, что мне не хватает чего-то основного. Я получаю undefined для этого и поэтому не могу прочитать свойство setState, пытающееся установить состояние в возврате функции, вызывающей выборку, что я делаю неправильно? Примечание. Я вызываю MyAction из onClick, и данные ответа в порядке.

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(function(response){ 
     this.setState({ 
      the_message: response.message 
     }); 
    }.bind(this)) 
}, 

Узнайте больше о том, что на this StackOverflow question.

Answer 2

Использование Функция стрелки (() => {}), которая сохраняет последний объем (this) как есть.

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

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) вы сохраняете объем в пределах вашей функции.