在反应中映射对象键并返回子属性

Tom*_*dge 3 arrays object ecmascript-6 lodash reactjs

我有一个映射对象数量的报告。在我的示例中,有 3 个对象数组。我想在每个对象映射时获取其中一个属性的值。

这是我返回报告的片段 React 代码:

return (
    <React.Fragment>
        { Object.keys(result).map((item, i) => (
            <div key={i} className="report">
                    <h3>{result[item].name}</h3>
            </div>
    ))}
    </React.Fragment>
)
Run Code Online (Sandbox Code Playgroud)

它映射const result输出如下:

result = {GK: Array(1), FB: Array(2), FW: Array(1)}
Run Code Online (Sandbox Code Playgroud)

上面有 3 个报告 - GK、FB 和 FW

我现在想进入每个报告并获得一个值。让我们看看FB:

FB: [ 0:{Number: 1, newNumber:"1", name: "FB" }
      1:{Number: 1, newNumber:"1", name: "FB" }
    ]
Run Code Online (Sandbox Code Playgroud)

我想确保当我检索报告时,该name属性还会映射以及我想要获取的任何其他属性。

<h3>{result[item].name}</h3>
Run Code Online (Sandbox Code Playgroud)

我认为上面会检索名称。所以我得到的结果是 3 个空白报告。

Cod*_*bie 5

再次map通过result[item].

   return (
        <React.Fragment>
            { Object.keys(result).map((item, i) => (
                <div key={i} className="report">
                       {result[item].map((media,ind) =>
                         <div key={ind}>{media.name}</div>
                      )}
                </div>
        ))}
        </React.Fragment>
    )
Run Code Online (Sandbox Code Playgroud)