更新

Question

我无法在.map

中获取要渲染的组件

render: function() {

  var self = this;

  var ListItems = this.props.data.map(function(data){
      self.props.fields.forEach(function(field, i) {
          if (field.fieldKey in data) {
              console.info(field.fieldKey + ': ' + data[field.fieldKey]);
              return (<ListItem {...data} key={'field-' + i}/>)
          } else {
              console.error(field.fieldKey + " doesn't exist. Please make sure you match your 'fieldKey' to an existing column in your data table");
          }
      });
  });


return <tr onDoubleClick={this.handleEditRow} onClick={this.handleSelectRow}>
    {ListItems}
    <td className="text-center">
        <span className="btn"><input type="checkbox" ref="deleteCheckbox" checked={this.props.checked} onChange={this.handleDeleteChange}/></span>
        <a className="btn" onClick={this.handleDeleteRow} title="Delete this Item"><i className="md md-close"></i></a>
    </td>
</tr>
  },

所以我的ListItem根本没有显示。如果我在第一个循环下移动它，它显示正常。谁能告诉我我做错了什么？

更新

JSON DATA

http://pastebin.com/MLbR77tG

所以，我正在创建一个列表视图。基本上，数据下的每个项目都有一个通过fieldKey附加的字段设置

因此，计划是吐出数据，但使用字段下的配置选项来格式化列表视图。即fieldKey是一个下拉列表，它的dataSource是消息yada yada。

名称（数据：测试1）（字段：下拉列表）| calling_gt（数据：123456）（字段：是文本）| op_code（数据：5678）（字段：是下拉列表）

Answer 1

查看Array.prototype.forEach() - MDN

forEach()为每个数组元素执行一次回调函数;与map()或reduce()不同，它始终返回未定义的值且不可链接。典型的用例是在链的末尾执行副作用。

例如，请查看此jsfiddle。当您在forEach()方法中返回值时，外部函数将不会接收该值，在本例中为map循环。相反，外部循环将始终从undefined循环获得forEach()。

Answer 2

您的return语句位于对forEach的调用中，这意味着它不会影响外部map语句。

这意味着map函数每次都返回undefined，这就是组件无法渲染的原因。

相反，您可以编写一个谓词函数，用于过滤掉未使用过的行。

hasValidFieldKeys: function(fields, data) {
  var invalidFields = fields.filter(function(field) {
    var hasKey = field.fieldKey in data;

    if(!hasKey) {
      // log error
    }

    return !hasKey;
  });

  return invalidFields.length > 0;
}

然后在组件的渲染方法中使用谓词函数。

var ListItems = this.props.data
  .filter(function(data) {
    // remove the rows that aren't valid
    return self.hasValidFieldKeys(self.props.fields, data);
  })
  .map(function(data, index) {
    return data.map(function(data, index2) {
      var compositeKey = 'field-' + index + ':' + index2; 
      return <ListItem {...data} key={compositeKey}/>;
    });
  });

如果数据缺少某些字段键，您的应用停止运行非常重要，那么请抛出错误，而不是使用console.error。

组件无法在.map forEach

更新

JSON DATA

2 个答案: