在ReactJS中获取“无法访问的代码无法访问”

时间:2017-12-20 03:33:18

标签: ajax reactjs get state

我是新手,在React中创建GET请求。当有人在输入字段中输入url时,我试图从Instagram内容中获取media_id。有趣的是我在Inspector中得到了以下GET请求的响应,但我不确定如何正确执行它。

以下是我的组件代码。

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});
  }
}

2 个答案:

答案 0 :(得分:3)

no-unreachable只是一个警告,告诉您代码中有无法访问的代码。在这种情况下,console.log(jsonResponse)

之后是return jsonResponse

它是无法访问的,因为当代码找到一个return语句时,它将突破该函数而不再继续,因此永远不会调用console.log(jsonResponse)

答案 1 :(得分:0)

在返回值后删除 console.log()