循環遍歷 json 文件中的嵌套數組對象時遇到問題

Question

我有一個與此類似的 json 文件：

[
 {
  "January": [
      {
           "Date": "Jan 1st",
           "Event": "New Years"
      },
      {
           "Date": "Jan 17th",
           "Event": "Chinese New Year"
      }
    ],
  "February": [
      {
           "Date": "Feb 14th",
           "Event": "Valentine's Day"
      },
      {
           "Date": "Feb 29th",
           "Event": "Leap Year"
      }
    ]
 }
]

json 文件的結構是這樣的，但有更多的事件和月份。

我嘗試使用嵌套循環，但在 JSX 中沒有返回任何內容。 如果我通過控制台記錄它，我能夠得到結果，所以我不確定我是否使用了錯誤的函數，以及我是否應該使用兩個映射循環而不是一個內部帶有map循環的forEach 。 這是我迄今為止嘗試過的：

{EventsList.forEach((monthObj) => {
    const monthObjKeys = Object.keys(monthObj);
    monthObjKeys.map((monthKey) => {
        const monthArr = monthObj[monthKey];
        return (
            <div className='Events__ItemList'>
                <h1 className='Events__Month'>{monthObjKeys}</h1>
                <div className='Events__Item'>
                    <p className='Events__Date'>{monthArr.Date}</p>
                    <p className='Events__Name'>{monthArr.Name}</p>
                </div>
            </div>
        );
    });
})}

任何幫助/建議將不勝感激

Answer 1

主要問題是.forEach()不返回任何內容，因此您可以使用.map()或.flatMap() 。

我建議使用一種更簡單的方法來解決您的問題，如下所示：

 const eventList = [{"January": [{"Date": "Jan 1st","Event": "New Years"},{"Date": "Jan 17th","Event": "Chinese New Year"}],"February": [{"Date": "Feb 14th","Event": "Valentine's Day"},{"Date": "Feb 29th","Event": "Leap Year"}]}] const events = eventList[0]; const months = Object.keys(events); const result = months.flatMap(key => events[key]); console.log(result);

因此， result你可以.map()通過你的JSX如下：

{
   result.map(({Date, Event}, index) =>
     <div className='Events__ItemList' key={index}>
         <div className='Events__Item'>
            <p className='Events__Date'>{Date}</p>
            <p className='Events__Name'>{Event}</p>
         </div>
     </div>
   ) 
}

正如我上面建議的那樣，您需要在每個迭代元素上使用index屬性。

在文檔中進一步了解List 和 Keys 。

Answer 2

使用forEach不會像使用.map那樣返回 React 組件實例的數組。 我可能會建議嘗試這個（注意：未經測試）：

{EventsList.flatMap((monthObj) => {
    const monthObjKeys = Object.keys(monthObj);
    return monthObjKeys.map((monthKey) => {
        const monthArr = monthObj[monthKey];
        return (
            <div className='Events__ItemList'>
                <h1 className='Events__Month'>{monthObjKeys}</h1>
                <div className='Events__Item'>
                    <p className='Events__Date'>{monthArr.Date}</p>
                    <p className='Events__Name'>{monthArr.Name}</p>
                </div>
            </div>
        );
    });
})}

所以主要有兩個變化：我在頂部使用了flatMap ，因為這個數組的每個元素本身都返回一個數組，我返回了.map()調用的結果。

如果我在頂部使用.map而不是.flatMap ，它將是一個組件數組的數組，我認為 React 不會接受——它需要一個組件數組——只有 1 層。