将数组添加到父组件的状态答案

【问题标题】：Adding an array to state of parent component将数组添加到父组件的状态
【发布时间】：2016-07-22 01:15:38
【问题描述】：

我目前正在使用 Soundcloud API，我正在尝试将返回的用户存储到一个数组中，然后将该数组设置为父对象。问题是当我控制台记录更新状态时，它显示它包含一个数组，但它是空的。以下是我的代码示例：

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

【问题讨论】：

您更新this.state.search 的唯一时间是e.target.value()。我看不到你在哪里setState({search: <array>}。还是您要更新avatar？
我正在尝试更新头像
我明白了。好吧，无论如何，请注意<input> 标签是special in React，需要与常规元素不同的处理方式。这也可能会影响您的程序。

标签： arrays api reactjs state soundcloud

【解决方案1】：

您正在尝试从回调外部的异步请求中获取值，这是错误的，将 setState 移动到回调内部

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

还可以将 getInitialState 中的 avarar 从 String 更改为 Array

【讨论】：