React Date Picker指定日期高亮功能未正常生效的问题及修复方案

使用React Date Picker时遇到已标记需要高亮的日期未正常显示高亮效果的问题，目前已完成修复，方案如下：

原有问题代码 #

const handleDayClick = (value) => {
    var tempselectedBlackOutDays = selectedBlackOutDays;
    const selectedIndex = tempselectedBlackOutDays.findIndex((selectedDay) =>
      isEqual(selectedDay, value)
    );

    if (selectedIndex >= 0) {
      tempselectedBlackOutDays.splice(selectedIndex, 1);
    } else {
      tempselectedBlackOutDays.push(value);
    }

    setSelectedBlackOutDays(tempselectedBlackOutDays);
  };

问题原因 #

核心原因是React的state浅比较机制：上述代码中直接将原有state数组selectedBlackOutDays的引用赋值给tempselectedBlackOutDays，后续的splice、push操作都是直接修改原数组，最终传入setSelectedBlackOutDays的仍然是和原state引用完全相同的数组，React会判定状态未发生变更，不会触发组件重渲染，因此高亮效果不会更新。

修复方法 #

将代码最后一行的状态更新逻辑改为传入新的数组实例即可，修改后代码如下：

setSelectedBlackOutDays(tempselectedBlackOutDays.map((x) => x))

也可以用数组扩展运算符实现相同效果：setSelectedBlackOutDays([...tempselectedBlackOutDays])，只要保证传入的是新的数组引用，就能触发React重渲染，高亮效果即可正常显示。

内容的提问来源于stack exchange，提问作者optimcode