Question

我想在嵌套的react组件中显示以下json数据。例如带有子列表的列表标题我已经尝试过使用for循环，但是由于某种原因，该组件无法显示

选择浇头1

Regurlar

酿

选择您的摘心2

大蒜

辣椒

Json数据的结构

let MenuContents = [{
           Title:'Choose one',
           List:{
             Option1:'Regular Base',
             Option2:'Stuffed Crust',
             Option3: 'Thick Base',
             Option4: 'Thin Base'
           }
        },
        {
           Title:'Choose one',
           List:{
             Option1:'Garlic Dip',
             Option2:'Chilli Dip',
             Option3: 'BBq Dip',
             Option4: 'Mayo'
           }
        },
        {
           Title:'Choose one',
           List:{
             Option1:'Tomato Base',
             Option2:'BBq Base',
             Option3: 'Garlic',
             Option4: 'Mayo'
           }
       }]



 
    MenuContents.map((x) => {
    return (
      <div>
        <div className="AddoneTitle">
          <li>
            <h3>{x.Title}</h3>
          </li>
        </div>
        <div className='Choose'>
         {
          Object
          .keys(x.List)
          .forEach(function(key) {
           return( <li>x.List[key]</li>)
          })
         }
      </div>
    </div>
    )
   });

Answer 1

这应该可以工作，因为forEach不会像地图那样返回列表项的数组，而且您在{}内缺少li

          MenuContents.map((x) => {
          return (
            <div>
              <div className="AddoneTitle">
                <li>
                  <h3>{x.Title}</h3>
                </li>
              </div>
              <div className='Choose'>
               {
                Object
                .keys(x.List)
                .map(function(key) {
                 return( <li>{x.List[key]}</li>)
                })
               }
            </div>
          </div>);
         })

Answer 2

使用

{
    x.List.map(record => {
        return (
            <li key={Object.keys(record)}>
                {Object.values(record)}
            </li>
        )
    })
}

代替：

 {
  Object.keys(x.List).forEach(function(key) {


   return( <li>x.List[key]</li>)
  
  })
  
 }

显示嵌套的反应组件

2 个答案: