React解析JSON渲染UL列表报错，求正确实现方案

你的问题情况 #

你手上的JSON数据是这样的：

[
   { 
      "node" : "GMC",
      "node1" : "2500",
      "node2" : [ { 
            "node2" : "GMC 2500",
            "location" : "Lot",
         }]
   }
]

尝试把它渲染成嵌套列表的时候，碰到了objects are not valid as React child (found: object with keys { node, node1 })这个错误，你写的渲染代码是：

{types.map(data => {
  <li> {data.node} // this displays GMC
    <ul> { data.node1 } </ul> //get the error.
     <ul> { data.node1.node1 } </ul> //also gives same error) 
 }

你想要的最终渲染效果是：

GMC
   2500
   Lot

为啥会出错？ #

我帮你捋捋代码里的几个问题：

• 箭头函数没返回值：你用箭头函数写渲染逻辑，但既没加return，也没把JSX用括号包起来，React根本拿不到要渲染的元素，这就会导致奇怪的错误。
• HTML结构不规范：你在<li>里直接套<ul>，正确的嵌套列表结构应该是：外层<ul>包含<li>，每个<li>里如果要嵌套子列表，得是<ul>里面再放<li>，不能直接把文本丢进<ul>里。
• node2数据访问错了：node2是个数组，你得遍历它才能拿到里面的location值，不能直接像访问普通属性那样取。

正确的渲染代码 #

按照你的需求，调整后的代码应该是这样的：

<ul>
  {types.map((data, index) => (
    <li key={index}>
      {data.node}
      <ul>
        {/* 渲染node1的值 */}
        <li>{data.node1}</li>
        {/* 遍历node2数组，取出location */}
        {data.node2.map((item, idx) => (
          <li key={idx}>{item.location}</li>
        ))}
      </ul>
    </li>
  ))}
</ul>

跟你说说这段代码的关键点： #

• 每个列表项都加了key属性，这是React列表渲染的硬性要求，用来让React高效识别列表项的变化，避免渲染异常。
• 把node1放在内层<ul>的<li>里，符合HTML列表的规范，也不会触发React的错误。
• 遍历data.node2数组，拿到每个对象里的location值，渲染成子列表项，这样就能展示出"Lot"了。
• 用括号把箭头函数里的JSX包起来，确保箭头函数能正确返回React元素，不会出现无返回值的问题。

这样渲染出来的结果就完全符合你的期望啦！

内容的提问来源于stack exchange，提问作者JustWantsToCode