如何在React中渲染嵌套数组元素 [英] How to render nested array elements in React?

问题描述

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

I want to render nested array elements. To render elements I used .map but it is not working for second array.

使用list = [{value:'One'，list:[{value:'abc'，selected:false}， {value:'efg'，selected:false}]}，{value:'Two'，列表:[{value: 'psr'，已选择:false}]}];

Using list=[{value: 'One', list:[{value: 'abc', selected: false}, {value: 'efg', selected: false}]}, {value: 'Two', list: [{value: 'psr', selected: false}]}];

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

我在这里错过了什么吗?

Am I missing anything here?

谢谢

推荐答案

尝试一下.您错过了第二个map

Try this. You missed { } before your second 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/

这篇关于如何在React中渲染嵌套数组元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！