delegieren oder make ajax rufen Sie eine Komponente in reagieren

Question

Wie Sie in dem Code unten sehen können, befindet sich meine Ajax (ich benutze Fetch) in einer HandleSearch-Funktion in App-Komponente. Wie kann ich den Ajax-Aufruf in einer eigenen Komponente delegieren und durchführen? Ich komme aus Winkel 1, in eckigen Dingen wie Dienstleistungen/Fabriken, aber ich bin mir nicht sicher, wie ich es umsetzen soll.

const App = React.createClass({ 
    getInitialState() { 
    return { 
     username: '', 
     profiles: [], 
     noUser : false 
    } 
    }, 
    handleInputChange(e) { 
    this.setState({ 
     username: e.target.value 
    }) 
    }, 
    handleSearch() { 
    if (!this.state.username) { 
     alert('username cannot be empty'); 
     return false; 
    } 
    fetch('https://api.github.com/search/users?q=' + this.state.username) 
     .then(response => { 
     return response.json() 
     }).then(json => { 
     this.setState({ 
      profiles: json.items 
     }) 

     if(json.items.length === 0){ 
      this.setState({noUsers : true}); 
     }else{ 
      this.setState({noUsers : false}); 
     } 
     }) 
    }, 
    render() { 
    return (
     <div> 
      <input type="text" placeholder="Github username" onChange={this.handleInputChange} value={this.state.username} /> 
      <button onClick={this.handleSearch}>Search</button> 
      {this.state.profiles.length > 0 && 
       <Users profiles={this.state.profiles} /> 
      } 
      {this.state.noUsers && 
       <p>No users found.</p> 
      } 
      </div> 
    ) 
    } 
}); 

http://codepen.io/eldyvoon/pen/ENMXQz Dieser Code benötigt viel Refactoring.

Answer 1

Nicht alles in React muss eine Komponente sein. Es ist immer noch im Wesentlichen schlicht altes Javascript darunter. Extrahiere die API-Logik in ihr eigenes Modul/Datei, z.

GithubApi.js

module.exports.getUsers = function(username) { 
    return fetch('https://api.github.com/search/users?q=' + username) 
    .then(response => { 
    return response.json() 
    }) 
} 

Und dann verwenden Sie es, wo immer es erforderlich ist:

var GithubApi = require('/path/to/GithubApi.js'); 

const App = React.createClass({ 
    .. 
    .. 
    handleSearch() { 
    if (!this.state.username) { 
     alert('username cannot be empty'); 
     return false; 
    } 
    GithubApi.getUsers(this.state.username) 
     .then(json => { 
     this.setState({ 
      profiles: json.items 
     }) 

     if(json.items.length === 0){ 
      this.setState({noUsers : true}); 
     }else{ 
      this.setState({noUsers : false}); 
     } 
     }) 
    }, 
    .. 
    .. 

Dies ist nur ein Beispiel - wie Sie Ihr Modul bis zu Ihnen gestalten wollen , je nachdem, wie spezifisch oder flexibel etc. Sie sein möchten.

Answer 2

Sie müssen es nicht in seine eigene React-Komponente schreiben, schreiben Sie einfach ein einfaches altes Javascript CommonJS-Modul und laden Sie es entweder über require() oder übergeben Sie es als Prop.