如何在 Javascript 回调函数 react-calendar-month-view 中显示过滤后的数据？答案

【问题标题】：How to show filtered data in Javascript callback function react-calendar-month-view?如何在 Javascript 回调函数 react-calendar-month-view 中显示过滤后的数据？
【发布时间】：2021-08-08 01:16:58
【问题描述】：

我正在使用这个 https://github.com/alwyntan/react-calendar-month-view 日历来呈现我的管理数据。

这是现场演示：https://alwyntan.github.io/react-calendar-month-view/，这是现场演示代码库 (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回调函数，基本上如果回调函数返回

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

上面的函数将创建一个日历，在 2021 年 5 月 7 日显示“光环”，在 5 月 1 日至 6 日和 5 月 8 日至 31 日不显示任何内容。

我的目标是结果数组（在顶部），比较日期和回调函数，所以在 2021 年 5 月 7 日，它返回结果 totalSubmit（即 8），在 2021 年 5 月 6 日，它返回结果totalSubmit（即17），依此类推。谁能帮帮我吗？我有点卡在这里，我尝试过使用地图和过滤器，但也许我做错了什么。

【问题讨论】：

标签： javascript arrays function sorting filter

【解决方案1】：

由于您可能会使用来自this question 的结果，我建议您使用更简单、更有帮助的数据格式：

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() 是一个指示去哪里。

【讨论】：