Question

我是React的新手，有一个我不明白的问题。我的数据是一个对象数组，其中包含来自JSON文件的“草图”（名称，“链接”数，“节点数”和其他内容）的属性。我加载数据并将其中的一部分发送到我按链接和节点数过滤的列表组件。一切正常。我的问题是我想在发送到过滤列表的内容中添加一个ID号（用于返回点击）。这是我的代码的LoadDataFrom Server部分：

const MyApp = React.createClass({  
  loadDataFromServer: function() {  
    $.ajax({                     
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
        const sketz = [];
        for (let i=0; i<data.length; i++) {
          const sid = i;
          sketz[i] = {sid: sid,
            name: data[i].name,
            numberOflinks: data[i].numberOflinks,
            numberOfnodes: data[i].numberOfnodes
         };
        }
        this.setState({
          sketches: sketz
        })
      }.bind(this),
     error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },   .....

问题在于，虽然来自数据的任何属性值都可以到达列表组件，但是我尝试添加的任何其他内容（例如“sid”），以及任何其他不是来自数据的属性和值都显示在列表组件为undefined。我已经检查了LoadDataFromServer中的草图，并且已分配了ID，但它们已在列表中消失。我真的不明白为什么草图对象数组以这种方式运行并且想要（1）理解为什么，以及（2）知道如何正确地做到这一点。谢谢！

按请求添加：列表组件（实际上是两个组件）。它遵循React docs在Thinking in React标题下使用的代码，它用于表，而不是无序列表。第一个console.log（用于ID）给出undefined;第二个为每次通过forEach提供正确的名称。

const SketchList = React.createClass({ 
  render: function() {
    const rows = [];
    const lf = this.props.numlnk;    // "link filter"
    const nf = this.props.numnde;   // "node filter"
    this.props.sketches.forEach(function(sketch) {
      console.log('in sketch, ID is ' + sketch.sid);
      console.log('in sketch, name is ' + sketch.name);
      if(lf == 0 || lf == sketch.numberOflinks) {
        if (nf == 0 || nf == sketch.numberOfnodes) {
          rows.push(<SketchRow 
            sketch={sketch} 
            key={sketch.name}
          />);
        }
      }
    });
    return (
      <div className="row voffset3 divcolor">
        <ul className="nobull mar-left list-scroll">
          {rows}
        </ul>
      </div>
    );
  }
});

const SketchRow = React.createClass({
  render: function() {
    return (
      <li >
        {
          this.props.sketch.name
        }
      </li>
    );
  }
});

Answer 1

谢谢Isiah。操作员错误。我正在将草图重置为渲染中的数据，从早期版本遗留下来，我只是在处理过滤后的列表。

React：LoadDataFrom Server中添加的对象属性在组件

1 个答案: