顯示嵌套的反應組件

Question

我想在嵌套的反應組件中顯示以下 json 數據。例如，我嘗試使用 for 循環的帶有子列表的列表標題，但由於某種原因組件不顯示

選擇你的澆頭 1

定期

塞滿

選擇你的澆頭 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 不會像 map 那樣返回列表項數組，而且您在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>)
  
  })
  
 }