反応成分を使ってjson-pを達成する方法

Question

ReactでWikipedia Viewerを作成しようとしています。しかし、クロス・オリジンの問題のため、私のlocalhost上のWikipedia APIからデータを取得するために、通常のAjax呼び出しを行うことはできません。 Reactはjquery（$）を受け入れてjquery JSON-pを使用していないようです。私も純粋なjavascriptの方法を試みたが、もし私が間違った方法をしていたかどうかわからない、それはどちらもうまくいかなかった。

私はどのようにJSON-p呼び出しをWikipedia APIに反応するコンポーネントから呼び出すことができるでしょうか？

私が使用したjquery JSOP APIコールです。

「jquery」のjqueryが必要です。

$ .when（$アヤックス（{ URL： "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search=" + SEARCHTERM、 データ型： 'JSONP' }。）） .then（関数（結果）{...

UPDATE： jqueryが反応していますが、jqueryからimport $を使用しました。 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

Yay！私はこの問題を解決することができました。ない何をしたか - JSON-Pのjqueryのために、私はそれがwork`なかった `この

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'))