React中setHistory在handleClick内无法更新状态的问题排查

核心问题：直接修改原状态引用 #

React 的状态更新依赖于引用变化触发重新渲染。handleClick 函数存在两个违反状态不可变原则的错误：

1. let newHistory = history 只是赋值原状态数组的引用，未创建新数组，后续 splice 操作直接修改了原状态数组。
2. selectedGame.isFavorite = !selectedGame.isFavorite 直接修改了原状态中的对象，属于状态突变。

当调用 setHistory(newHistory) 时，由于 newHistory 和原 history 是同一个引用，React 无法检测到状态变化，因此不会触发组件更新。而 removeHistoryItem 中 filter 方法返回全新数组，引用不同，所以状态更新正常。

修复方案：创建状态副本修改 #

需创建原数组和目标对象的副本，确保不直接修改原状态，以下是两种可行修复方式：

方式一：使用 map 生成新数组（推荐） #

const handleClick = () => {
  const newHistory = history.map(item => {
    if (item.id === id) {
      // 返回新对象，切换 isFavorite 状态
      return { ...item, isFavorite: !item.isFavorite };
    }
    return item;
  });
  localStorage.setItem('history', JSON.stringify(newHistory));
  setHistory(newHistory);
};

方式二：复制数组并替换目标对象 #

const handleClick = () => {
  // 创建原数组的浅拷贝
  let newHistory = [...history];
  // 找到目标对象的索引
  const index = newHistory.findIndex(item => item.id === id);
  
  if (index !== -1) {
    // 创建目标对象副本并切换状态
    const updatedGame = { ...newHistory[index], isFavorite: !newHistory[index].isFavorite };
    // 替换新数组中的对象
    newHistory.splice(index, 1, updatedGame);
    localStorage.setItem('history', JSON.stringify(newHistory));
    setHistory(newHistory);
  }
};

两种方式均生成全新数组引用，且修改的是对象副本，React 能正确检测状态变化并完成更新。

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