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

Posted 2023-02-22

【中文标题】在反应中映射对象键并返回子属性

【英文标题】：Mapping object keys in react and returning child properties

【发布时间】：2019-01-21 07:34:54

【问题描述】：

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

这是我返回报告的 sn-p React 代码：

return (
    <React.Fragment>
         Object.keys(result).map((item, i) => (
            <div key=i className="report">
                    <h3>result[item].name</h3>
            </div>
    ))
    </React.Fragment>
)

它映射const result，输出如下：

result = GK: Array(1), FB: Array(2), FW: Array(1)

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

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

FB: [ 0:Number: 1, newNumber:"1", name: "FB" 
      1:Number: 1, newNumber:"1", name: "FB" 
    ]

我想确保当我检索报告时，name 属性也映射了我想要获取的任何其他属性。

<h3>result[item].name</h3>

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

【问题讨论】：

似乎 result[item] 应该是一个数组对吗？因此，您还需要映射该数组。 result[item][0].name 应该返回字符串。

【参考方案1】：

您需要使用获得的key 再次映射到result

   <React.Fragment>
        Object.keys(result).map((key, i) => (result[key].map((media, ind) =>
              <div key=ind>
               <h3>media.name</h3>
             </div>
            )
        ))
      </React.Fragment>

【参考方案2】：

试试这个代码：这里是代码的链接：https://codesandbox.io/s/pj1lv7y4xq

const arrayvals = [
    Number: 1, newNumber: "1", name: "FB" ,
     Number: 3, newNumber: "2", name: "FB" ,
      Number: 7, newNumber: "5", name: "GK" ,
       Number: 8, newNumber: "4", name: "FW" 
]



function App() 
  return (
    <div className="App">
      <h1>Mapping object keys in react and returning child properties
</h1>
    Object.entries(arrayvals).map((arr)=>

        return <div>Number is : arr[1].Number  || NewNumber is : arr[1].newNumber ||  and Value is : arr[1].name</div>
    )
    </div>
  );

【参考方案3】：

再次通过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>
    )