React状态更新处理器仅生效一次：Map类型状态切换异常排查

你的代码里出现的问题核心是直接修改了原Map状态对象。Map属于引用类型，selectedLetters.set(letter, ...)会直接改变原状态中的Map实例，后续用new Map(...)包装这个已被修改的Map，本质上还是同一个引用。React依赖状态的引用变化触发组件重渲染，第一次修改后，后续状态更新时引用未发生变化，React便不会重新渲染组件，导致点击按钮无反应。

修复后的代码 #

import { useState } from "react"

export default function Try(){
  const [selectedLetters, setSelectedLetters] = useState(new Map([['a', false],['b',false]]))
  
  function handleToggleLetterSelected(letter: string) {
    return () => {
      setSelectedLetters(prevMap => {
        // 创建原Map的副本，避免修改原状态
        const newMap = new Map(prevMap);
        // 切换对应key的布尔值
        newMap.set(letter, !newMap.get(letter));
        return newMap;
      });
    };
  }

  return(
    <div>
      {['a','b'].map((letter) => (
        <button
          key={letter}
          onClick={handleToggleLetterSelected(letter)}
        >
          {selectedLetters.get(letter) ? <span>Unselect</span> : <span>Select</span>} 
          <span>{letter}</span>
        </button>
      ))}
    </div>
  )
}

关键修改说明 #

• 创建Map副本：通过const newMap = new Map(prevMap)生成原状态Map的全新实例，确保操作的是新对象而非直接修改原状态。
• 简化切换逻辑：用!newMap.get(letter)直接对布尔值取反，替代冗余的if-else判断，代码更简洁。
• 保证引用变化：每次状态更新返回全新的Map实例，让React能正确检测到状态变化并触发组件重渲染。

你也可以把事件处理器改成箭头函数形式，避免嵌套返回函数，写法更直观：

// 简化后的事件处理器
const handleToggleLetterSelected = (letter: string) => () => {
  setSelectedLetters(prevMap => {
    const newMap = new Map(prevMap);
    newMap.set(letter, !newMap.get(letter));
    return newMap;
  });
};

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