wix/react-native-calendars切换月份时multi-dot不生效问题如何解决？

问题原因 #

• 代码层面存在逻辑错误：formatDots 方法中reduce回调参数名错误、未传入初始值、取值逻辑错误，导致生成的markedDates结构不符合预期。
• wix/react-native-calendars 对markedDates仅做浅比较，若传入对象的引用未发生变化，组件不会触发重渲染。debug模式下的热重载会强制刷新视图，所以表现正常，正式环境下不会触发强制刷新，所以标记不更新。
• 未指定markType为multi-dot，多圆点标记无法正确渲染。

解决方案 #

第一步：修正formatDots逻辑 #

保证每次返回全新的不可变对象，符合官方要求的不可变规范：

const formatDots = (data) => {
  // reduce传入空对象作为初始值，每次遍历返回全新对象
  return data.reduce((acc, current) => {
    return {
      ...acc,
      [current.date]: {
        dots: pins
      }
    }
  }, {});
};

第二步：给Calendar组件添加key属性强制重渲染 #

通过绑定当前月份作为key，每次切换月份时key变化，React会直接重建Calendar组件，使用最新的markedDates渲染：

const [calenderDots, setCalenderDots] = useState({});
// 新增状态存储当前月份标识
const [currentMonthKey, setCurrentMonthKey] = useState('');

const pins = [
  { key: 'medication', color: 'green' },
  { key: 'doctorNote', color: 'red' },
];

const fetchMonthlyData = async (date) => {
  // 取当前月份字符串作为key的一部分
  const monthKey = date.dateString.slice(0, 7);
  setCurrentMonthKey(monthKey);
  const response = await fetchData(date);
  setCalenderDots(formatDots(response));
};

return (
  <Calendar
    // 绑定key，切换月份时强制组件重渲染
    key={`cal-${currentMonthKey}`}
    // 指定标记类型为多圆点
    markType="multi-dot"
    onMonthChange={fetchMonthlyData}
    markedDates={calenderDots}
  />
);

原理说明 #

• key是React用于标识组件唯一性的属性，当key发生变化时，React会卸载旧组件、挂载新组件，新组件会直接使用最新的props渲染，绕开了组件内部的浅比较逻辑，彻底解决markedDates更新不生效的问题。
• 每次生成markedDates时都返回全新对象，符合官方要求的不可变规范，避免意外的引用复用导致的渲染问题。

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