Question

我使用Object

映射Object.entries()的键

<div>
return Object.entries(obj).map([key, value]){
    <span key={key}> {key}: {value} </span>
}
</div>

obj看起来像这样：

{
    group: ‘name’,
    address: ‘Address’,
    manager: ‘John’,
    products: [
        {
        electronic: ‘laptop’,
        team: ‘Awesome’
        }
    ]
}

使用上面的映射，我可以理解为：

group: name
address: Address
manager: John
products: [object object] [object object]

如何渲染除最后一个键（产品）之外的所有内容，以便在div中显示以下内容：

group: name
address: Address
manager: John

Answer 1

使用arr.length作为地图函数的第三个参数获取对象中的键数，并与地图函数中的index进行比较，如下面的代码段所示。您还从地图

错误地返回数据

var data = {
    group: 'name',
    address: 'Address',
    manager: 'John',
    products: [
        {
        electronic: 'laptop',
        team: 'Awesome'
        }
    ]
}
var len = Object.keys(data).length;
Object.entries(data).map(([key, val], index, arr) => {
     if(index !== arr.length - 1) {
     console.log(key, val, index);
     }
})

您正在编码

<div>
 {Object.entries(obj).map([key, value], index, arr){
    if(index < arr.length) {
          return   <span key={key}> {key}: {value} </span>
    } 
}
</div>

Answer 2

尝试：

<div>
return Object.entries(obj).map([key, value], i, arr){
    if (i !== arr.length - 1) {
      <span key={key}> {key}: {value} </span>
    }
}
</div>

Answer 3

您可以在map：

之前使用过滤器

var data = {
    'group': 'name',
    'address': 'Address',
    'manager': 'John',
    'products': [
        {
            'electronic' 'laptop',
            'team': 'Awesome
        }
    ]
}

return Object.entries(data).filter(([key, value]) => {
  if (typeof value !== 'object' ) return 1;
}).map(([key, value]) => {
    <span key={key}> {key}: {value} </span>
});

这里任何具有对象价值的关键都将被消除。

将返回：

group: name
address: Address
manager: John

Answer 4

检查值的类型，如果type为object，则从渲染中跳过该部分。通过这种方式，它将跳过objects and arrays。

typeof([])  ==> 'object'

typeof({})  ==> 'object'

像这样：

＆＃13;

var data = {
    group: 'name',
    address: 'Address',
    manager: 'John',
    products: [
        {
           electronic: 'laptop',
           team: 'Awesome'
        }
    ]
}

Object.entries(data).map(([key, val], index) => {
     if(typeof(val) != 'object') {
        console.log(key, val, index);   //return the span 
     }
     else null;
})

＆＃13;

将console.log(key, val, index)替换为<span key={key}> {key}: {value} </span>。

除最后一个键之外的对象映射 - Reactjs

4 个答案: