Javascript 为什么不'；t这些JSX<；李>；项目渲染？

我有一个嵌套对象：

 const data = {
    username: "username",
    date: "16/01/2021",
    time: "10:30",
    end: "11:30",
    equipment: {
        thing1: 0,
        thing2: 0,
        thing3: 0,
    },
    cost: 25.00
}

我想使用JSX为每个键/值对创建一个li项，作为功能性React组件的一部分

代码的其余部分如下所示：

const entries = Object.entries(data)

return (
  <div>
     <h4>Please review your booking</h4>
     <ul>
       {
         entries && typeof entries === 'object' ? 
         entries.map(entry => {
           if (typeof entry[1] ==='object') {
             let nestedObj = Object.entries(entry[1])
              nestedObj.map(entry => { 
                return <li>{entry[0]}: {entry[1]}</li>)
              }
            } else {<li>{entry[0]}: {entry[1]}</li>}
         })
         : <li></li>
       }
      </ul>
   </div>
)

const entries=Object.entries（数据）
返回(
请检查您的预订

{
条目&&typeof条目==='object'？
entries.map（entry=>{
if（条目类型[1]=='object'）{
让nestedObj=Object.entries（条目[1]）
map（条目=>{
return
{entry[0]}:{entry[1]}
）
}
}else{
{entry[0]}:{entry[1]}
}
})
：

}

)

---

在我看来，它应该会起作用。用控制台日志而不是李的日志测试了逻辑，结果很好。有什么想法吗？

您似乎没有在

map

函数中返回值

if (typeof entry[1] ==='object') {
   let nestedObj = Object.entries(entry[1])
      return nestedObj.map(entry => { 
         return <li>{entry[0]}: {entry[1]}</li>)
      }
} else {
  return (<li>{entry[0]}: {entry[1]}</li>)
}

if（条目类型[1]='object'）{
让nestedObj=Object.entries（条目[1]）
返回nestedObj.map（条目=>{
return
{entry[0]}:{entry[1]}
）
}
}否则{
返回（
{entry[0]}:{entry[1]}
）
}

您有两个错误：您没有从

其他

返回，并且您有一个额外的结束参数

 return (
    <div>
      <h4>Please review your booking</h4>
      <ul>
        {
          entries && typeof entries === 'object' ? 
            entries.map(entry => {
              if (typeof entry[1] ==='object') {
                let nestedObj = Object.entries(entry[1])
                nestedObj.map(entry => { 
                  // removed extra paren here
                  return <li>{entry[0]}: {entry[1]}</li>
                })
              } else {
                // added return here
                return <li>{entry[0]}: {entry[1]}</li>
              }
            })
            : <li></li>
        }
      </ul>
    </div>
  )

返回(
请检查您的预订

{
条目&&typeof条目==='object'？
entries.map（entry=>{
if（条目类型[1]=='object'）{
让nestedObj=Object.entries（条目[1]）
map（条目=>{
//这里删除了额外的paren
return
{entry[0]}:{entry[1]}
})
}否则{
//这里增加了回报
return
{entry[0]}:{entry[1]}
}
})
：

}

)

可能是因为对象存在，所以您正在渲染

条目。映射
而不是
，但它不应该仍然渲染一些
，然后呢？抱歉，如果对象存在，则不必渲染，但看起来条目总是存在的，并且条目总是object类型。如果看不到代码的其余部分，很难知道，抱歉。但您定义的条目正好位于返回的上方，因此它总是存在是有意义的