React-Native Axiosリクエストと未定義の小道具

Question

Axiosを使っていくつかのものを返すためにWeb APIをポーリングします。現時点では、Axiosは、APIを実行し、それがにconsole.log言うように、私は正しい応答が返ってきたことをログに記録することができます

(2) [Object, Object] 

をしかし、私は

this.props.navigator.push({ 
    title: "Results", 
    component: "SearchResults", 
    passProps: {response: response} 
    }); 

私が手をしようとした場合、 "TypeError： 'evalで未定義のプロパティ' props 'を読み取ることができず、this.props.navigator.pushを含む行にエラーが表示されます。

関連コード：

_axiosFetch(searchString) { 
    var queryURL = 'http://mourningafter.eu/DataService.php?state=get&name=' + searchString 
    axios.get(queryURL) 
     .then(function (response) { 
      console.log(response) 
      this.props.navigator.push({ 
       title: "Results", 
       component: SearchResults, 
       passProps: {response: response} 
      }); 
     }) 
     .catch(function (error) { 
      console.log(error) 
     }); 
} 

私は、控えめに言って混乱しています！

どのようなヘルプも素晴らしいでしょう、歓声！

Answer 1

_axiosFetchコールのコンテキストはわかりませんが、コンポーネントが自分のコンポーネントを参照しているとします。次に、.then(function(response){})コールバックに焦点を当てます。コンテキストを変更し、コンポーネントを参照しなくなります。したがって、コールバックでthis.props...を呼び出すことはできません。

使用矢印機能は、コールバック関数を固定

_axiosFetch(searchString) { 
    var queryURL = 'http://mourningafter.eu/DataService.php?state=get&name=' + searchString 
    axios.get(queryURL) 
     .then((response) => { 
      console.log(response) 
      this.props.navigator.push({ 
       title: "Results", 
       component: SearchResults, 
       passProps: {response: response} 
      }); 
     }) 
     .catch(function (error) { 
      console.log(error) 
     }); 
}