如何在 Javascript 回調 function react-calendar-month-view 中顯示過濾后的數據？

Question

我正在使用這個https://github.com/alwyntan/react-calendar-month-view日歷來呈現我的管理數據。

Here is the live demo: https://alwyntan.github.io/react-calendar-month-view/ , and this is the live demo codebase ( https://github.com/alwyntan/react-calendar-month-view /blob/master/examples/src/index.js ）。

所以我有這個數組

const result = [{
        date: "5/7/2021",
        totalSubmit: 8
    },
    {
        date: "5/6/2021",
        totalSubmit: 17
    },
    {
        date: "5/3/2021",
        totalSubmit: 11
    }
]

該組件接受一個renderDay回調function，基本上如果回調function返回

const renderDayF = (day) => {
    const dayDate = new Date(day).toLocaleDateString()
    if (dayDate === '5/7/2021') {
        return (<p>
            Halo
        </p>)
    }
};

上面的 function 將創建一個在 2021 年 5 月 7 日顯示“光環”的日歷，而在 5 月 1 日至 6 日和 5 月 8 日至 31 日則沒有。

我的目標是結果數組（在頂部），比較日期和回調 function，所以在 2021 年 5 月 7 日，它返回結果 totalSubmit（即 8），在 2021 年 5 月 6 日，它返回結果 totalSubmit（即 17），依此類推。 誰能幫幫我嗎？ 我有點卡在這里，我嘗試過使用地圖和過濾器，但也許我做錯了什么。

Answer 1

由於您可能會使用此問題的結果，我建議您使用更簡單、更有用的數據格式：

const submitcounts = updatedSales.reduce((a,{date}) => {
      a[date] = (a[date] || 0) + 1;
      return a;  
    }, {});
/*      = {"5/7/2021": 8,
           "5/6/2021":17,
           "5/3/2021":11}
*/
        
const renderDayF= (day) => {
    const dayDate = new Date(day).toLocaleDateString("en-US")
    console.log(submitcounts[dayDate]||"");
    // return (<p>...</p>)
};

這樣一來，一切都很容易就位。 不幸的是，我不知道如何以 React 方式執行此操作，但我希望我的console.log()可以指示 go 的位置。