Javascript ReactJS基于数组的值渲染OBJ.map

我试图根据对象中的项目呈现一组

，但我不想为了显示它们而必须指定对象中项目的名称

在下面的示例中，我希望WorkObjectID和WorkObjectVal是动态的，而不是静态的。如果将tempObject添加到对象中，则在呈现数据时不会显示它，因为我没有在迷你表中定义它

如果可能的话，我想通过在

var WORKOBJECTSVALS={}

中发送它们来指定将显示哪些

  var WORKOBJECTS = [ {
                      WorkObjectID: "1", WorkObjectVal: "First",
                      TempObject1: "55", TempObject2: "Denied" 
                      }, 
                      {
                       WorkObjectID: "2", WorkObjectVal: "Second",
                      TempObject1: "110", TempObject2: "Allowed" 
                      }];
  var WORKOBJECTSVALS = {"WorkObjectID", "WorkObjectVal", "TempObject1" };

  render: function () {
    var miniTable = this.state.WORKOBJECTS.map(function(val) {
      return (
         <div> {val.WorkObjectID} </div>
         <div> {val.WorkObjectVal} </div>

      );
    });
    return(
      {miniTable}
    );
}

var WORKOBJECTS=[{
WorkObjectID:“1”，WorkObjectVal:“第一”，
TempObject1:“55”，TempObject2:“拒绝”
}, 
{
WorkObjectID:“2”，WorkObjectVal:“第二”，
TempObject1:“110”，TempObject2:“允许”
}];
var WORKOBJECTSVALS={“WorkObjectID”、“WorkObjectVal”、“TempObject1”}；
渲染：函数（）{
var miniTable=this.state.WORKOBJECTS.map（函数（val））{
返回(
{val.WorkObjectID}
{val.WorkObjectVal}
);
});
返回(
{miniTable}
);
}

---

在上面的示例中，我希望显示

TempObject1

，但不希望显示

TempObject2

。如果我将来决定将

TempObject2

添加到div中，我只需要将其添加到

WORKOBJECTSVALS

，我该怎么做

您需要做的是处理属性名，因为它们是键<代码>对象。键返回属性名数组。然后在

映射

之前添加一个

过滤器

，以便删除不需要的属性名称

下面是对示例的修改，首先使用

Object.keys

（请注意workobject和WORKOBJECTSVALS定义中的更改，以便它们都是对象而不是数组）

---

您的方法可以工作，但如果我传递包含多组数据的WORKOBJECTS，它不会添加每一个，即：var WORKOBJECTS=[{WorkObjectID:“2”，WorkObjectVal:“Sec”，TempObject1:“44”，TempObject2:“Denied”}，{WorkObjectID:“1”，WorkObjectVal:“First”，TempObject1:“55”，TempObject2:“Denied”}；如果WORKOBJECTS是一个对象数组，那么将我上面编写的代码作为处理数组中每个对象的核心。例如，您可以使用forEach包装上述核心，然后连接生成的数组。谢谢。我就是这样做的，将所有数组循环到WORKOBJECTS中，并将每个迷你表的结果值推送到一个新数组中，并显示出来，它完全按照我想要的方式工作。

var WORKOBJECTS = { WorkObjectID: "1", WorkObjectVal: "First",
                    TempObject1: "55", TempObject2: "Denied" };
var WORKOBJECTSVALS = { WorkObjectID: true, WorkObjectVal: true, TempObject1: true };

render: function () {
  var workObjects = this.state.WORKOBJECTS;
  var miniTable = Object.keys(workObjects).
    .filter(function(keyName) {
      return WORKOBJECTSVALS[keyName];
    })
    .map(function(keyName) {
      var workObjectID = keyName;
      var workObjectVal = workObjects[keyName];
      return (
         <div> {workObjectID} </div>
         </div> {workObjectVal} </div>
      );
    });
  return(
    {miniTable}
  );
}

.filter(function(keyName) {
  return WORKOBJECTSVALS.indexOf(keyName) !== -1;
})