外部関数でsetStateを使用するには？

Question

import Request from 'superagent'; 

const getApi =() => { 
    let url = '/* URL */'; 
    return Request.get(url).then((res) => { 
     this.setState({ 
      content: res.body 
     }); 
    }); 
} 

export default getApi; 

の外部ファイルにfunctionを作成しました。 function/setStateへの外部ファイルへのアクセス方法を教えてください。

componentWillMount(){ 
    getApi(); 
} 

私はこのエラーが表示されます。

'TypeError: Cannot read property 'setState' of undefined'

Answer 1

マイソリューション：

function getApi(component) { 
     let url = '/* url */'; 
     return Request.get(url).then((res) => { 
      component.setState({ 
       content: res.body, 
      }); 
     }); 
    } 

---

componentWillMount(){ 
    getApi(this); 
} 

Answer 2

あなたのコンポーネントからgetApi関数にコールバックを渡すことができます。

const getApi = (onSuccess) => { 
    let url = '/* URL */'; 
    return Request.get(url).then((res) => { 
     onSuccess(res.body); 
    }); 
} 

コンポーネント

componentWillMount(){ 
    getApi(this.setApiResponse); 
} 

setApiResponse(data) { 
    this.setState({ 
     content: data 
    }); 
} 

NB。プロジェクトが大きくなるにつれ、Reduxなどの状態管理システムを調べることをお勧めします。

Answer 3

に技術的に渡して、thisとなるはずです。しかし、イモ。それは貧弱なアプローチです。不要な依存関係が作成されます。現時点では、getApi()はReactクラスの仕組みを知る必要があります。この関数はインスタンスの状態を正しく操作する責任があります。

getApi()のみ値を返し、インスタンスがそれを消費した場合より良い：

const getApi =() => { 
    let url = '/* URL */'; 
    return Request.get(url).then(res => res.body); 
} 

componentWillMount(){ 
    getApi().then(content => this.setState({ content })); 
}