スーパーエージェントとリアクトを使用したAPIレスポンスからsetState

Question

コンポーネントの状態を変更しようとするとエラーが発生します。

Uncaught TypeError: Cannot read property 'setState' of undefined

constructor(props){ 
    super(props); 

    this.state={ 
     r:'', 
     message:'' 
    }; 
    this.setStateMessage = this.setStateMessage.bind(this); 
} 
setStateMessage (e){ 
    e.preventDefault(); 
    var test = this.state.message; 

    request 
     .post('http://127.0.0.1:5000/api/db') 
     .send({message: this.state.message}) 
     .accept('application/json') 
     .withCredentials() 
     .end(function(err, res){ 
     if(err) 
      throw err; 
     this.setState({ r: res.body.message }); 
     }); 
} 

render() { 
    return (
     <div> 
      <div className='response'> 
       {this.state.r} 
      </div> 
      //form with input 
     </div> 
    )} 

Answer 1

あなたがそうthis関数内からthis.setStateを呼び出しているので、これはある実際にあなたがしている関数への参照です。あなたは正しいthisへの参照を保存したり、その矢印を使用するか必要があります独自のコンテキストを持たず、親コンテキストから継承します。だから、：

setStateMessage (e){ 
    e.preventDefault(); 
    var test = this.state.message; 
    var self = this; 

    request 
    .post('http://127.0.0.1:5000/api/db') 
    .send({message: this.state.message}) 
    .accept('application/json') 
    .withCredentials() 
    .end(function(err, res){ 
     if(err) throw err; 
     self.setState({ r: res.body.message }); 
    }); 
} 

または：

setStateMessage (e){ 
    e.preventDefault(); 
    var test = this.state.message; 

    request 
    .post('http://127.0.0.1:5000/api/db') 
    .send({message: this.state.message}) 
    .accept('application/json') 
    .withCredentials() 
    .end((err, res) => { 
     if(err) throw err; 
     this.setState({ r: res.body.message }); 
    }); 
} 

Answer 2

@のaray12の答えに追加するには、あまりにもコールバックをバインドすることができます。この私の最終的なコードの上にあまりにも多くの時間を過ごした後

setStateMessage (e){ 
    e.preventDefault(); 
    var test = this.state.message; 

    request 
    .post('http://127.0.0.1:5000/api/db') 
    .send({message: this.state.message}) 
    .accept('application/json') 
    .withCredentials() 
    .end((function(err, res) { 
     if(err) throw err; 
     this.setState({ r: res.body.message }); 
    }).bind(this)); 
} 

Answer 3

はここにある

class Data extends React.Component{ 

    constructor(){ 
     super() 
     this.state={ 
      name:'' 
     } 
    } 

    componentDidMount(){ 
     console.log('componentDidMount'); 

     var url = "http:\//localhost:3000/order/test"; 
     Request 
     .get(url) 
     .query(null) 
     .set('Accept', 'application/json') 
     .end ((error, response)=>{ 
      const title=response.text 
      console.log(JSON.stringify(title)); 

      this.setState({ 
       name:title 
      }); 
     }); 

    } 

    render(){ 
     return <div>World {this.state.name}</div>; 
    } 

} 

注：応答は、あなたが、私は私の場合に使用してresponse.textを使用する必要がテキストがある場合

詳細を知りたい場合click here