React音乐理论应用：和弦音阶颜色高亮逻辑错误修复求助

这两个bug的核心是高亮状态没有按“触发源”（和弦/音阶）做分层管理，而是用单一集合记录所有标红项，导致不同操作的高亮状态互相覆盖或错误清除。

Bug 1 原因与修复 #

先选和弦再选音阶时，原有和弦触发的标红被取消，是因为处理音阶选择时直接重置了整个高亮集合，用音阶的不兼容项完全覆盖了之前和弦的高亮结果。

Bug 2 原因与修复 #

取消音阶时错误恢复非该音阶导致的标红，是因为清除高亮时没有区分触发源，直接把相关项全部移除，连和弦触发的高亮也被误删。

具体修复步骤 #

1. 重构状态结构，分层管理高亮来源 #

把原来单一的高亮状态（比如highlightedNotes）拆分为两个独立状态，分别记录和弦、音阶触发的不兼容音符：

// App.js 中修改状态定义
const [chordHighlightedNotes, setChordHighlightedNotes] = useState(new Set());
const [scaleHighlightedNotes, setScaleHighlightedNotes] = useState(new Set());

2. 调整选择逻辑，分别更新对应状态 #

• 选择和弦时，只计算该和弦的不兼容音符，更新chordHighlightedNotes：

const handleChordSelect = (selectedChord) => {
  // 替换为你实际的不兼容音符计算逻辑
  const incompatibleNotes = getIncompatibleNotesFromChord(selectedChord);
  setChordHighlightedNotes(new Set(incompatibleNotes));
};

• 选择音阶时，只计算该音阶的不兼容音符，更新scaleHighlightedNotes：

const handleScaleSelect = (selectedScale) => {
  const incompatibleNotes = getIncompatibleNotesFromScale(selectedScale);
  setScaleHighlightedNotes(new Set(incompatibleNotes));
};

3. 合并高亮状态，渲染时判断最终样式 #

渲染音符或选项时，合并两个集合，判断当前项是否属于任意一个高亮集合：

// 判断当前音符是否需要标红
const shouldHighlight = (note) => {
  return chordHighlightedNotes.has(note) || scaleHighlightedNotes.has(note);
};

// JSX中绑定样式
<div className={`note-option ${shouldHighlight(note) ? 'highlight-red' : ''}`}>
  {note}
</div>

4. 调整取消选择逻辑，仅清除对应来源的高亮 #

• 取消和弦选择时，清空chordHighlightedNotes：

const handleChordClear = () => {
  setChordHighlightedNotes(new Set());
};

• 取消音阶选择时，仅清空scaleHighlightedNotes：

const handleScaleClear = () => {
  setScaleHighlightedNotes(new Set());
};

验证场景 #

• 先选和弦再选音阶：两个触发源的高亮同时生效，不会互相覆盖
• 取消音阶：仅移除音阶导致的标红，和弦的高亮保留
• 先选音阶再选和弦：原有正常逻辑不受影响
• 仅选和弦/音阶：各自状态单独生效，符合预期

内容的提问来源于stack exchange，提问作者Juan F. Nelson