コールreact.js

Question

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

にレンダリングするための別のコンポーネントは、私が取得し、リストをレンダリングしない成分Aを持っています。私はユーザー入力を受け入れるコンポーネントBを持っています。コンポーネントBからコンポーネントAを起動するにはどうすればよいですか？私の構造は間違っていると思う。

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

まずオフ：

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

取得が原因で復帰のここで実行されない飽きないだろう。終わりに戻ります。

第2に、コンポーネントが新しい小道具を受け取ったときにフェッチする必要があります。私は、フェッチするクラスに新しいメソッドを追加し、getInitialStateとcomponentWillReceivePropsの両方から呼び出します。だから、：

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}) 
     }) 
    }, 

問題は、コンポーネントがすでに存在しているということなので、getInitialStateは呼び出されません。ただそれを更新する必要があります。