Question

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

这是我的代码片段，用于返回报告：

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个空白报告。

Answer 1

您需要使用获得的result重新映射到key

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

Answer 2

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

Answer 3

尝试以下代码：这是指向以下位置的代码的链接：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>
  );
}

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

3 个答案: