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

Posted 2023-02-22

【中文标题】将数组添加到父组件的状态

【英文标题】：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，需要与常规元素不同的处理方式。这也可能会影响您的程序。

【参考方案1】：

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

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

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