如何在對象內部打印元素值使用es6反應

Question

我有一個對象數組，我想在每個對象中打印每個元素的內容，我嘗試了this（ React中的Render Object屬性）中提供的方法，我得到的只是元素列表，沒有其值

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}）

輸出結果如下

     A1
    west
    west-01
    1.1.1.1
    test'}

所以我想要的是打印對象內每個元素的值，如下所示：

  A1 west west-01 1.1.1.1 test'} 

Answer 1

只需使用Object.entries：

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

Answer 2

您只需要從val查找值：

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

Object.keys(value)將返回一個包含所有對象鍵的數組。 然后，您需要獲取值（ value[val] ）。

Answer 3

問題是您正在運行鍵循環，因此您需要使用該鍵來獲取值，如下所示：

{
    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>)
}

查看此代碼片段，您將有一個更好的主意：

 let obj = {a:1, b:2}; console.log("keys array = ", Object.keys(obj)); console.log("values array = ", Object.values(obj));