반응 구성 요소를 사용하여 json-p를 얻는 방법

Question

React를 사용하여 Wikipedia Viewer를 만들려고합니다. 하지만 크로스 기점 문제로 인해 로컬 호스트에서 Wikipedia API의 데이터를 가져 오기 위해 정상적인 아약스 호출을 할 수 없습니다. React는 jquery ($)를 jquery JSON-p를 사용하는 것으로 받아들이지 않는 것 같습니다. 나는 또한 순수한 자바 스크립트 방식을 시도했지만 잘못된 방식으로 수행하고 있는지 확신 할 수 없다.

아무도 말해서 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, dataType와 'JSONP' }.)) 그 때는 (기능 (결과) {...

UPDATE : 이제 jquery가 반응하고 있습니다. jquery에서 import $을 사용했습니다. API 호출이 작동하고있는 것 같습니다.하지만 jquery json-p 블록에서 데이터를 가져올 수 없습니다.이 문제를 인식하지 못합니다. 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에 대한 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'))