为何React开发的FCC鼓机页面重复渲染且按键触发音频测试不通过

问题1：FCC第6项按键触发测试不通过解决方案 #

• 全局绑定键盘事件时，将获取到的按键字符统一转为大写/小写，和鼓垫绑定的触发字符做匹配，避免大小写差异导致匹配失败
• 触发对应鼓垫的音频时，先执行audio.currentTime = 0再调用audio.play()，保证每次按键都能即时触发音频，符合测试要求
• 确保你触发音频的逻辑是直接操作.drum-pad节点下的子audio元素，而不是自定义的音频实例，FCC测试会检测原生audio元素的触发状态

问题2：index.html需要额外添加div才能编译的解决方案 #

• 问题根源是你同时写了两套挂载逻辑：App组件内部存在挂载到#drum-machine节点的代码，同时index.js中又将App组件挂载到了#root节点，缺少任意一个节点都会导致挂载失败
• 优化方案：删除index.html中的<div id="drum-machine" class="container"></div>，仅保留<div id='root'></div>；同时删除App组件内部的挂载逻辑，将App组件JSX的根节点添加id="drum-machine" className="container"属性即可，编译和运行都会正常。

问题3：GitHub Pages站点出现两个重复应用的解决方案 #

• 该问题和双挂载逻辑直接相关：你同时往#drum-machine和#root两个DOM节点渲染了完整的鼓机应用，所以页面会出现两个相同的应用
• 按上述问题2的优化方案修改后，仅保留单挂载逻辑，重复渲染的问题会自动解决。

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