Javascript React组件返回JSON对象上的空doing foreach

我有一个包含多个级别的JSON对象，我试图通过迭代来显示它，但结果总是空的

<div>    
Operation
    **Speed: Slow
    **Direction: Forward
    **Status: Moving
</div>
<div>
Detail
**Type: Electric
**Drivetrain: AWD
</div>

下面的代码可以工作，但很难将每个级别封装在一个DIV中

    const Bompush = (obj) => {
        let output = []

        Object.keys(obj).forEach(key => {
            output.push(<div key={key}>{key}</div>)

            Object.keys(obj[key]).forEach (value => {
                output.push(<div key={value}>{value}</div>)

            })
        })

        return output  
}

---

forEach

不收集结果。您需要

映射

：

Object.keys(obj[key]).map(value => (
  <div className="item" key={value}>{value}</div>
))

Object.key（obj[key]）.map（值=>(
{value}
))

您最好拉出内部组件（至少是这样），因为尽管如此简单，它已经很难阅读了。我会考虑重构对象，再加上你对对象属性排序的控制，你可能不会总是得到你更喜欢的结果。 需要进行一些重构和/或重新思考

---

在不偏离原始代码的情况下，并且完全未经测试，我可能会开始更多地考虑以下内容：

const Item = ({ value, item }) => (
  <div className="item">{value}: {item}</div>
)

const Category = ({ cat, obj }) => {
  return (
    <div className="category">
      {key}

      {Object.keys(obj).map(val => <Item key={val} value={val} item={obj[val]} />)}
    </div>
  )
}

const Bom = obj => (
  <div className="outerContainer">
    {Object.keys(obj).map(cat => <Category key={cat} cat={cat} obj={obj[cat]} />)}
  </div>
)

const Item=（{value，Item}）=>(
{value}:{item}
)
常量类别=（{cat，obj}）=>{
返回(
{key}
{Object.keys（obj.map）（val=>）}
)
}
常量Bom=obj=>(
{Object.keys（obj.map）（cat=>）}
)

forEach

不收集结果。您需要

映射

：

Object.keys(obj[key]).map(value => (
  <div className="item" key={value}>{value}</div>
))

Object.key（obj[key]）.map（值=>(
{value}
))

您最好拉出内部组件（至少是这样），因为尽管如此简单，它已经很难阅读了。我会考虑重构对象，再加上你对对象属性排序的控制，你可能不会总是得到你更喜欢的结果。 需要进行一些重构和/或重新思考

---

在不偏离原始代码的情况下，并且完全未经测试，我可能会开始更多地考虑以下内容：

const Item = ({ value, item }) => (
  <div className="item">{value}: {item}</div>
)

const Category = ({ cat, obj }) => {
  return (
    <div className="category">
      {key}

      {Object.keys(obj).map(val => <Item key={val} value={val} item={obj[val]} />)}
    </div>
  )
}

const Bom = obj => (
  <div className="outerContainer">
    {Object.keys(obj).map(cat => <Category key={cat} cat={cat} obj={obj[cat]} />)}
  </div>
)

const Item=（{value，Item}）=>(
{value}:{item}
)
常量类别=（{cat，obj}）=>{
返回(
{key}
{Object.keys（obj.map）（val=>）}
)
}
常量Bom=obj=>(
{Object.keys（obj.map）（cat=>）}
)

forEach不返回任何内容，我想您应该使用mapforEach，因为它不返回任何内容，我想您应该使用有效的Map！我的对象是从最终形式定义出来的，所以我被它卡住了。谢谢你的回答。@ryatkins你对这个对象很满意，但你并没有拘泥于你选择如何处理这个对象。我愿意接受让这个更干净的建议：）我也不喜欢它有多么难以理解。@ryatkins（非常）粗略地说，我开始朝着我附加在答案后面的东西前进。我还可能使用polyfill或实用工具来映射对象，这样您就不必处理

Object.keys

。在不知道更多信息的情况下，这是我目前所能做的最好的事情。我做了一个更新，添加了cat={cat}，因为React不喜欢通过键传递变量。此外，该项现在在该级别同时收到了键值对。再次谢谢你，戴夫，真管用！我的对象是从最终形式定义出来的，所以我被它卡住了。谢谢你的回答。@ryatkins你对这个对象很满意，但你并没有拘泥于你选择如何处理这个对象。我愿意接受让这个更干净的建议：）我也不喜欢它有多么难以理解。@ryatkins（非常）粗略地说，我开始朝着我附加在答案后面的东西前进。我还可能使用polyfill或实用工具来映射对象，这样您就不必处理

Object.keys

。在不知道更多信息的情况下，这是我目前所能做的最好的事情。我做了一个更新，添加了cat={cat}，因为React不喜欢通过键传递变量。此外，该项现在在该级别同时收到了键值对。再次谢谢你，戴夫。

const Item = ({ value, item }) => (
  <div className="item">{value}: {item}</div>
)

const Category = ({ cat, obj }) => {
  return (
    <div className="category">
      {key}

      {Object.keys(obj).map(val => <Item key={val} value={val} item={obj[val]} />)}
    </div>
  )
}

const Bom = obj => (
  <div className="outerContainer">
    {Object.keys(obj).map(cat => <Category key={cat} cat={cat} obj={obj[cat]} />)}
  </div>
)