Question

我遇到的问题是我的代码在从商店传递数据后没有呈现。

我能够来自商店的console.log（）数据，但数据没有显示在DOM中。

这是我的组件的样子

var ItemList = React.createClass({
  mixins: [Reflux.connect(SearchStore,"data")],

  getItems() {
    var items;
    var self = this;

    if(typeof self.state.data !== 'undefined' && self.state.data !== '404') {
      items = self.state.data;              
      for(var key in items) {
        if (items.hasOwnProperty(key)) {
          items[key].map(function(obj, key){
            return(
              <h1>Test Test</h1>
            );
          })
        }
      }
    } else {
      return(<div></div>);
    }
  },

  render() {
    var self = this;
    return (
      <div id="search-results">
        {self.getItems()}
      </div>
    );
  }
});

export default ItemList;

数据在从商店传递之后进入，我可以读取数据并且能够呈现空div，但是带有文本的div根本没有被渲染。我的目的是获取传递的数据并将它们作为道具传递给另一个组件。

任何有关解决这个问题的帮助都会非常棒，因为我在过去的几个小时里一直坚持这一点。

Answer 1

问题是getItems不返回呈现项目数组。所以我会把它改成这样的东西：

var ItemList = React.createClass({

  mixins: [Reflux.connect(SearchStore,"data")],

  renderItems() {
    var output = [];

    if (typeof this.state.data !== 'undefined' && this.state.data !== '404') {
      for (var key in this.state.data) {
        if (this.state.data.hasOwnProperty(key)) {
          // should use each or forEach instead of map as we don't do anything
          // with returned array but ignoring that issue
          this.state.data[key].map(function(obj, key){
            output.push(<h1>Test Test</h1>);
          });
        }
      }

      return output;
    } else {
      return <div/>;
    }
  },

  render() {
    return (
      <div id="search-results">
      {
        this.renderItems()
      }
      </div>
    );
  }

});


export default ItemList;

React不呈现来自回流存储的数据

1 个答案: