ReactJS 根据数组的值渲染 OBJ.map

Posted 2023-02-22

【中文标题】ReactJS 根据数组的值渲染 OBJ.map

【英文标题】：ReactJS render a OBJ.map based on values of an array

【发布时间】：2015-10-31 03:36:27

【问题描述】：

我正在尝试根据对象中的项目呈现一组 <div> </div>，但我不想为了显示它们而必须指定对象中项目的名称。

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

如果可能，我想通过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
    );

在上面的示例中，我希望显示 TempObject1，但不显示 TempObject2。如果我将来决定要将TempObject2 添加到 div 中，我只需将其添加到WORKOBJECTSVALS，我该怎么做？

【参考方案1】：

您需要做的是使用属性名称，因为它们是关键。 Object.keys 返回属性名称数组。然后在map 之前添加filter，以便删除不需要的属性名称。

这是对您的示例的修改，首先使用 Object.keys（注意 WORKOBJECTS 和 WORKOBJECTSVALS 定义的更改，因此它们都是对象而不是数组）

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
  );

如果 WORKOBJECTSVALS 必须是一个数组，您可以更改过滤器来执行此操作。但是它的效率较低，尤其是当数组很大时

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

【讨论】：

您的方法有效，但如果我传递的 WORKOBJECTS 包含一组以上的数据，则不会添加每个数据，即：var WORKOBJECTS = [ WorkObjectID: "2", WorkObjectVal: "Sec", TempObject1 : "44", TempObject2: "Denied" , WorkObjectID: "1", WorkObjectVal: "First", TempObject1: "55", TempObject2: "Denied" ];

如果WORKOBJECTS是一个对象数组，以我上面写的代码为核心，处理数组中的每个对象。例如，您可以使用 forEach 包装上述核心，然后连接生成的数组。

谢谢。我就是这样做的，循环了 WORKOBJECTS 中的所有数组，并将每个 miniTable 的结果值推送到一个新数组中并显示它，它完全按照我想要的方式工作。