2017-12-20 16 views
0

ReactでGETリクエストを作成するのは初めてです。誰かが入力フィールドにURLを入力すると、Instagram Contentからmedia_idを取得しようとしています。面白いのは、次のGETリクエストについてインスペクタで応答を得ることですが、これを正しく実行する方法がわかりません。到達不能なコード到達不能ReactJS

以下は私のコンポーネントコードです。

import React, { Component } from 'react'; 


export default class UrlInput extends Component { 

    constructor(props){ 
    super(props); 

    this.state = { 
     term: '', 
     mediaid: '' 
    }; 
    this.onInputChange = this.onInputChange.bind(this); 
    } 
    componentDidMount(){ 
    const url = 'https://api.instagram.com/oembed/?url=http://instagram.com/p/Y7GF-5vftL/'; 
    fetch(url).then(response => { 
     if(response.ok){ 
      return response.json(); 
     } 
     throw new Error('Request failed!'); 
     }, 
     networkError => console.log(networkError.message)).then(jsonResponse => { 
     return jsonResponse; 
     console.log(jsonResponse); 
     }); 
    } 

    render(){ 
    return (
     <div className='search-bar'> 
      <input 
      value= {this.state.term} 
      onChange={ event => this.onInputChange(event.target.value)} /> 

      <div>{this.state.term}</div> 
     </div> 
    ); 
    } 
    onInputChange(term){ 
    this.setState({term}); 
    } 
} 

助けてもらえますか?ありがとうございました。

+0

GETコールの応答を投稿できますか? 'then'の中に' debugger; 'を置くと、ブラウザのレスポンスを処理するコードをステップ実行できるはずです。 –

答えて

3

no-unreachableは、コードに到達できないコードがあることを示す警告です。この場合、それはconsole.log(jsonResponse)

コードはreturn文を見つけたとき、それだけで機能を打破し、さらにいずれかを続行されませんので、それが到達不能であるreturn jsonResponseた後、これconsole.log(jsonResponse)が呼ばれることはありませんです。

+0

ありがとうございます@ジャックイフ –

関連する問題