如何使用 es6 打印对象内的元素值答案

【问题标题】：how to print the elements value inside an object react using es6如何使用 es6 打印对象内的元素值
【发布时间】：2018-07-30 22:00:42
【问题描述】：

我有一个对象数组，我想打印每个对象中每个元素的内容，我已经尝试了 this(Render Object properties in React) 中提供的方法，我得到的只是一个没有它的元素列表价值观

state={
  machines: [{
        MachineName: 'A1',
        region: 'west', 
        zones:'west-01',
        ipAddr:'1.1.1.1',
        subnet:'test'}, 
      {
        MachineName: 'A2',
        region: 'west', 
        zones:'west-01',
        ipAddr:'1.1.1.2',
        subnet:'test2'

}]

}
      render() {
const machinespc=this.state.machines.map((value,key)=>{

  return (
    <div>
        <div className="col-md-4" key={key}>
            <div className="dashboard-info">

                {Object.keys(value).map((val, k) => {
                    return (<h4 k={k}>{val}</h4>)
                    })
                }

            </div>
        </div>
    </div>
)

})
  return (

{machinespc} )

输出如下所示，

    MachineName
    region 
    zones
    ipAddr
    subnet

所以我想要打印对象内每个元素的值，如下所示：

     A1
    west
    west-01
    1.1.1.1
    test'}

【问题讨论】：

Object.keys 返回一个键名数组，因此，您的返回行应该类似于return (<h4 k={val}>{value[val]}</h4>)。也许用有意义的名字命名你的变量会有所帮助。

标签： javascript arrays reactjs

【解决方案1】：

问题是您正在运行键循环，因此您需要使用该键来获取值，如下所示：

{
    Object.keys(value).map((val, k) => <h4 k={k}>{value[val]}</h4>)
}

或者你可以使用Object.values，它会返回所有值的数组，像这样：

{
    Object.values(value).map((val, k) => <h4 k={k}>{val}</h4>)
}

检查这个sn-p，你会得到一个更好的主意：

let obj = {a:1, b:2};

console.log("keys array = ", Object.keys(obj));

console.log("values array = ", Object.values(obj));

【讨论】：

【解决方案2】：

只需使用 Object.entries：

{Object.entries(value).map(([key, value]) => {
      return (<h4>{key} : {value}</h4>);
}) }

【讨论】：

【解决方案3】：

您只需要从您的val 中查找值：

{Object.keys(value).map((val, k) => {
    const theValue = value[val];
    return (<h4 key={k}>{theValue}</h4>)
    })
}

Object.keys(value) 将返回一个包含所有对象键的数组。然后您需要获取值 (value[val])。

【讨论】：