Hinzufügen eines Arrays zum Status der übergeordneten Komponente

Question

Ich arbeite derzeit mit der Soundcloud-API und versuche, die zurückgegebenen Benutzer in einem Array zu speichern, und setze dann das Array auf das übergeordnete Objekt. Das Problem ist, wenn ich console.log den aktualisierten Zustand zeige es zeigt ein Array aber es ist leer. Im Folgenden ist ein Beispiel für meine Code:

var SearchBar = React.createClass({ 
 
    getInitialState: function(){ 
 

 
    return {search : '', 
 
      avatar : '', 
 
      } 
 

 
    }, 
 

 
    onChange: function(e){ 
 
    e.preventDefault(); 
 
    this.setState({search: e.target.value}); 
 
    console.log('does this work', this.state.search) 
 
    
 
    }, 
 

 
    onClick: function(e){ 
 
    e.preventDefault(); 
 

 
    }, 
 

 
    getData: function(){ 
 
    var userAv = []; 
 
    SC.get('/users', { q: this.state.search, limit: 10 }, function(users){ 
 
    _.each(users, function(obj){ 
 
     userAv.push(obj); 
 
    }); 
 
    
 
    console.log('What is userAv', userAv); 
 
    
 
    
 

 
    }) 
 
    this.setState({ avatar: userAv}, function(){ 
 
      console.log('What is this.state.avatar', this.state.avatar) 
 
    
 
    }); 
 
}, 
 

 
    render: function(){ 
 
     return (
 
      <div id='search-container'> 
 
      <input 
 
      onChange={this.onChange} 
 
      id='search-bar' 
 
      type = 'text' 
 
      value={this.state.search} 
 
      placeholder = 'Search For Artist here' 
 
      /> 
 
      <button 
 
      id="search-button" 
 
      onClick={this.getData} 
 
      type = 'button'> 
 
      Submit 
 
      </button> 
 
      <UserList /> 
 

 
      </div> 
 
      ) 
 
    } 
 
});

Answer 1

Sie sind außerhalb von Rückruf get Werte von Asynchron-Anforderung versucht, die falsch ist, bewegen setState innerhalb Rückruf

SC.get('/users', { q: this.state.search, limit: 10 }, function(users) { 
    this.setState({ avatar: users }); 
}.bind(this)); 

auch avarar chnage in getInitialState bis Array von String