javascript - 为什么不是这些 JSX物品渲染？

Question

我有这个嵌套对象：

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

我想为每个键/值对创建一个 li 项，作为使用 JSX 的功能性 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>
)

在我看来它应该可以工作。用控制台日志而不是 li 测试了逻辑，这很好。有任何想法吗？

标签： javascriptreactjs

Answer 1

您有两个错误：您不是return来自else，并且您有一个额外的结束括号。

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