如何在 React 中渲染嵌套数组元素？

Posted 2023-02-14

【中文标题】如何在 React 中渲染嵌套数组元素？

【英文标题】：How to render nested array elements in React?

【发布时间】：2017-10-01 01:30:51

【问题描述】：

我想渲染嵌套数组元素。为了渲染元素，我使用了 .map 但它不适用于第二个数组。

使用 list=[value: 'One', list:[value: 'abc', selected: false, value: 'efg', selected: false], value: 'Two', list: [value: 'psr', 选择: false]];

   list.map((item, index) => 
        return (
          <div key=index>
            <ul >item.value</ul>
            item.list.map((subitem, i) => 
              return (
                 <ul >subitem.value</ul>
              )
            )
          </div>
        )
      )

我这里有什么遗漏吗？

谢谢

【问题讨论】：

您想在嵌套列表中呈现它们，还是展平数组？

@TomFenech 我必须显示嵌套数组的详细信息

我可以看到您的数组，您需要向我们展示的是您尝试生成的 html 的所需结构。目前，您所拥有的是无效的。

@TomFenech 是的。我不知道如何将 .map 用于嵌套数组

jsfiddle.net/jwm6k66c/2611 检查这个。

【参考方案1】：

试试这个。您在第二个map

之前错过了

 list.map((item, index) => 
            return (
              <div key=index>
                <ul >item.value</ul>
               
                item.list.map((subitem, i) => 
                  return (
                     <ul ><li>subitem.value</li></ul>
                  )
                )
               
              </div>
            )
          

演示：https://jsfiddle.net/jwm6k66c/2611/

【讨论】：

尝试为您的答案添加解释！

@TomFenech 我正在添加

您的回答处理了可能的语法错误，但没有考虑到文本节点不是 <ul> 元素的允许子节点这一事实。

抛出错误。它说无法读取未定义的属性“地图”。引用 item.list.map

好的。谢谢@Ved