React日历组件切换周数据页面不更新问题求助

问题根源 #

你用let current = 1定义的是普通变量，React无法追踪它的变化。点击按钮修改current后，虽然getWeekArray()能算出正确的新周数据，但组件不会触发重渲染，页面上的shownWeek始终停留在首次渲染的第一周结果。另外按钮的onclick写法不符合React规范，也会导致逻辑异常。

修复方案 #

用React的useState管理当前周索引，让状态变化自动触发组件重渲染，同时修正事件绑定写法：

import { useState } from 'react'; // 必须导入useState

export default function Calendar() {
  const size = 7;
  // 用useState声明状态，初始值为1
  const [current, setCurrent] = useState(1);

  function next() {
    const maxWeek = Math.floor(eightWeeks.length / size);
    if (current < maxWeek) {
      // 通过setCurrent更新状态，触发组件重渲染
      setCurrent(prev => prev + 1);
    }
  }

  function getWeekArray() {
    return eightWeeks.slice(size * current - size, size * current);
  }

  // 每次渲染时基于最新的current计算当前周数据
  const shownWeek = getWeekArray();

  return (
    <div>
      <h1>{shownWeek.join(', ')}</h1> {/* 把数组转为可读性强的字符串 */}
      <button onClick={next}>next</button> {/* React事件用驼峰onClick，传递函数引用 */}
    </div>
  );
}

关键修改点说明 #

1. 状态管理：用useState替代普通变量current，setCurrent更新状态时会自动触发组件重渲染，此时shownWeek会基于最新的current重新计算。
2. 事件绑定：React事件采用驼峰命名onClick，直接传递函数引用next，避免渲染时立即执行函数。
3. 数据展示：用join(', ')把日期数组转为字符串，避免页面显示原始数组格式（如果存储的是Date对象，还可以进一步格式化日期，比如用toLocaleDateString()）。

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