如何每5分钟从cartList同步价格更新tableData状态？

1. 修正tabledata的初始化逻辑 #

localStorage存储的是字符串格式数据，需要解析为数组，同时处理空值场景：

const [cartList, setCartList] = useState([]);
const [tabledata, setTabledata] = useState(() => {
  const storedItems = localStorage.getItem("items");
  // 解析本地存储的字符串，为空时返回空数组
  return storedItems ? JSON.parse(storedItems) : [];
});

2. 编写高效的价格更新函数 #

将cartList转换为以id为键的映射表，把单条商品价格的查找复杂度从O(n)降到O(1)，适配大数据量场景：

const updateTableDataPrices = () => {
  // 构建id到最新价格的映射表
  const priceMap = new Map(cartList.map(item => [item.id, item.price]));
  
  setTabledata(prevData => {
    // 遍历原数组，仅更新匹配id的价格，保留其他字段
    const updatedData = prevData.map(item => {
      if (priceMap.has(item.id)) {
        return { ...item, price: priceMap.get(item.id) };
      }
      return item;
    });
    
    // 更新后同步到localStorage，保证页面刷新后数据一致
    localStorage.setItem("items", JSON.stringify(updatedData));
    return updatedData;
  });
};

3. 使用useEffect管理定时任务 #

通过React副作用钩子设置5分钟一次的定时更新，同时清理定时器避免内存泄漏：

useEffect(() => {
  // 可选：初始化时立即同步一次最新价格
  updateTableDataPrices();
  
  // 设置每5分钟（300000毫秒）执行一次更新
  const intervalId = setInterval(updateTableDataPrices, 300000);
  
  // 组件卸载时清理定时器
  return () => clearInterval(intervalId);
}, [cartList]); // 依赖cartList，当商品最新数据更新时，重新触发同步逻辑

关键优化点 #

• 性能优化：用Map替代数组find方法，在商品数量较多时大幅提升查找效率
• 状态合规：更新tabledata时始终返回新数组，符合React状态不可变的更新规范
• 资源防护：组件卸载时清理定时器，避免无用的后台任务占用资源
• 数据一致性：更新状态后同步到localStorage，保证页面刷新后数据仍为最新版本

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