React中使用useParams()时，如何在日历页显示每日待办总数

核心问题分析 #

你遇到的问题本质是Calendar组件没有正确读取对应日期的待办数据，要么是读取逻辑错误，要么是读取时机不对，导致todos.length始终返回0。

具体解决方案 #

1. 封装日期专属的localStorage读取函数 #

先写一个复用函数，确保能精准获取对应日期的待办数据，避免不同日期的数据冲突：

const getDailyTodos = (dateId) => {
  // 给每个日期的待办加前缀，防止数据混淆
  const storedData = localStorage.getItem(`daily_todos_${dateId}`);
  // 没有数据就返回空数组
  return storedData ? JSON.parse(storedData) : [];
};

2. 在Calendar组件中实时计算单日期待办数 #

假设你是循环渲染日历日期项，在渲染每个日期时调用上面的函数，直接计算该日期的待办总数：

// 假设dates是你的日期数组，每个元素包含dateId和显示用的日期文本
{dates.map(dateItem => {
  const todos = getDailyTodos(dateItem.dateId);
  return (
    <div key={dateItem.dateId} className="calendar-date-item">
      <Link to={`/todo/${dateItem.dateId}`}>
        {dateItem.displayText}
        {/* 显示待办总数，没有就显示0 */}
        <span className="todo-badge">{todos.length}</span>
      </Link>
    </div>
  );
})}

3. 同步待办更新后的总数显示 #

当用户在ToDo组件修改待办后，Calendar页面需要实时更新总数，可以通过两种方式实现：

• 方式一：用状态管理同步数据
  把待办数据放到React Context或者轻量状态库（比如Zustand）里，Calendar和ToDo组件共享状态，修改后自动同步，不用依赖localStorage的读取。
• 方式二：监听storage事件
  在Calendar组件里监听浏览器的storage变化，触发组件重新计算：

  import { useState, useEffect } from 'react';
  
  function Calendar() {
    const [renderKey, setRenderKey] = useState(0);
  
    useEffect(() => {
      const handleStorageUpdate = () => {
        // 改变key值触发组件重新渲染
        setRenderKey(prev => prev + 1);
      };
      window.addEventListener('storage', handleStorageUpdate);
      return () => window.removeEventListener('storage', handleStorageUpdate);
    }, []);
  
    return (
      <div>
        {dates.map(dateItem => {
          const todos = getDailyTodos(dateItem.dateId);
          // 把renderKey加到key里，确保重新渲染时更新数据
          return <div key={`${dateItem.dateId}-${renderKey}`}>{/* 日期内容 */}</div>;
        })}
      </div>
    );
  }
  

4. 排查常见错误点 #

如果还是显示0，检查这几个地方：

• 确认ToDo组件保存待办时，用的key和Calendar组件读取的key完全一致（比如都是daily_todos_${id}）
• 检查dateId的格式是否统一（比如都是YYYY-MM-DD，别出现2024/05/20和2024-05-20这种不匹配的情况）
• 打开浏览器控制台，输入localStorage.getItem('daily_todos_你的日期ID')，确认对应日期确实有待办数据

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