Как достичь JSON-P с реагировать компонентов

Question

Я пытаюсь сделать Wikipedia Viewer с помощью React. Но я не могу сделать обычный вызов ajax, чтобы получить данные из API Википедии на моем локальном хосте из-за проблемы перекрестного происхождения. React также не принимает jquery ($) для меня, чтобы использовать jquery JSON-p. Я также пробовал чистый способ JavaScript, но я не уверен, что делал неправильно, он тоже не работал.

Может кто-нибудь сказать мне, как я могу сделать вызов JSON-p из компонента реагировать на API Википедии?

Вот вызов jquery JSOP API, который я использовал.

требовать jquery от 'jquery';

$.when ($. ajax ({url: " https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search=" + searchTerm, dataType: 'jsonp'})).then (функция (результат){ ...

ОБНОВЛЕНИЕ: Теперь я получил JQuery работает в реагировать. Я использовал - импортировать $ из 'jquery'. API-вызов, кажется, работает. Но я не могу взять данные из блока jquery json-p. Он не распознает this.setState или любую другую функцию, которая находится за пределами этого блока. Ниже приведен мой код:

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import Searchbar from './Searchbar';
import ListView from './ListView';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      term: ""
    };
  }

  searchWiki(term){
    $.when($.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search="+term,
      dataType: 'jsonp'
    }))
    .then(function(result){
      console.log(result);
      this.setState({term:term});
      });
  }


  render(){


    return(
      <div>
        <center>
          <h1>Wikipedia Viewer</h1>
          <Searchbar onSearchTermChange={this.searchWiki.bind(this)}/>
              <ListView term={this.state.term}/>
        </center>
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))

Answer 1

Ура! Мне удалось получить решение этой проблемы. Для JSON-P JSON, я должен был использовать синтаксис ES6 (result)=>{} для функции обратного вызова затем

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import Searchbar from './Searchbar';
import ListView from './ListView';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      term: "",
      searchResult: ""
    };
  }

  searchWiki(term){

    $.when($.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search="+term,
      dataType: 'jsonp'
    }))
    .then((result)=>{
        console.log(result[1]);

        this.setState({
          term: term,
          searchResult: result[1]
        });
      });



  }


  render(){


    return(
      <div>
        <center>
          <h1>Wikipedia Viewer</h1>
          <Searchbar onSearchTermChange={this.searchWiki.bind(this)}/>
          <ListView term={this.state.searchResult}/>
        </center>
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))