Anruf eine andere Komponente in react.js

Question

http://codepen.io/anon/pen/KNEzOX?editors=0010

Ich habe die Komponente A zu machen, dass die nicht holen und die Liste machen. Ich habe Komponente B, die die Benutzereingabe akzeptieren. Wie feuere ich Komponente A von Komponente B? Ich denke, meine Struktur ist falsch.

const Profiles = React.createClass({ 
    getInitialState(){ 
    return {profiles: []} 
    if(!this.props.username){ 
     return false; 
    } 
    fetch('https://api.github.com/search/users?q=' + this.props.username) 
     .then(function(response) { 
     return response.json() 
     }).then(function(json) { 
     this.setState({profile: json.items}) 
     }) 
    }, 
    render(){ 
    return (
     <ul> 
     { 
      this.state.profiles.map(profile => 
      <li key={profile.id}>profile.name</li> 
     ) 
     } 
     </ul> 
    ) 
    } 
}) 

const Input = React.createClass({ 
    getInitialState(){ 
     return {username:''} 
    }, 
    handleInputChange(e){ 
     this.setState({username:e.target.value}) 
    }, 
    handleSearch(){ 
     if(!this.state.username){ 
     alert('username cannot be empty'); 
     return false; 
     } 
     //call profile component and pass username to it? 
    }, 
    render() { 
     return(
      <div> 
      <input type="text" placeholder="github username" onChange={this.handleInputChange} value={this.state.username} /> 
      <button onClick={this.handleSearch}>Search</button> 
      <Profiles username={this.state.username} /> 
      </div> 
     ) 
    } 
}); 

Answer 1

Zunächst einmal:

getInitialState(){ 
    return {profiles: []} 
    if(!this.props.username){ 
     return false; 
    } 
    fetch('https://api.github.com/search/users?q=' + this.props.username) 

Fetch wird nie wegen der Rückkehr ausgeführt hier. Setzen Sie die Rückkehr am Ende.

Zweitens, was Sie hier brauchen, ist es zu holen, wenn die Komponente neue Requisiten erhält. Was ich tun würde ist, eine neue Methode zu der Klasse hinzuzufügen, die abzurufen, und rufen Sie beide aus getInitialState und componentWillReceiveProps. Also:

getInitialState(){ 
    if(!this.props.username){ 
     return false; 
    } 
    this._fetchData(); 
    return {profiles: []} 
    }, 
    componentWillReceiveProps(){ 
    this._fetchData(); 
    }, 
    _fetchData(){ 
    fetch('https://api.github.com/search/users?q=' + this.props.username) 
     .then(function(response) { 
     return response.json() 
     }).then(function(json) { 
     this.setState({profile: json.items}) 
     }) 
    }, 

Das Problem ist, dass die Komponente bereits vorhanden ist, so ist getInitialState nicht aufgerufen. Es muss sich nur selbst aktualisieren.