React中useState新增自定义属性后状态未更新该如何解决？

问题原因 #

useState 的初始值仅在组件首次挂载时生效，你的状态优先从 localStorage 读取旧数据，旧数据结构中不存在 weekTotal 字段，因此即便修改了 useState 默认值，实际运行时还是会沿用没有该字段的旧数据。

解决方法 #

• 方案1：保留旧 localStorage 数据，做字段兼容
  在组件初始化读取 localStorage 时，给每条数据补全缺失的 weekTotal 字段，示例代码如下：

  // 封装获取初始状态的逻辑
  const getInitialTracker = () => {
    const savedData = localStorage.getItem('tracker')
    if (savedData) {
      const parsedData = JSON.parse(savedData)
      // 遍历补全所有缺失字段
      return parsedData.map(item => ({
        num: 0,
        name: '',
        weekTotal: 0,
        ...item
      }))
    }
    // 无本地存储时返回新的完整初始值
    return [
      {num:0,id:0,name:"", weekTotal:0},
      {num:0,id:1,name:"",weekTotal:0},
      {num:0,id:2,name:"",weekTotal:0},
      {num:0,id:3,name:"",weekTotal:0},
      {num:0,id:4,name:"",weekTotal:0},
      {num:0,id:5,name:"",weekTotal:0}
    ]
  }
  
  // useState 直接传入初始化函数
  const [tracker, setTracker] = useState(getInitialTracker)
  

  同时确认后续调用 setTracker 后存储到 localStorage 的逻辑，是保存包含 weekTotal 字段的完整结构。

• 方案2：不需要保留旧数据时，直接清空本地存储
  打开浏览器开发者工具 -> 应用（Application）面板 -> 找到对应域名下的 localStorage -> 删除 tracker 对应的键值对，刷新页面后就会加载新的初始状态。

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