时间戳

首页 > 解决方案 > 为什么 React App 在网页上出现两次？

javascript - 为什么 React App 在网页上出现两次？

问题描述

我基于 Free Code Camp 的 Drum Machine 项目创建了一个 React 应用程序，该应用程序在 Code Pen 上成功运行并通过了此处找到的所有测试https://codepen.io/kevin-orara/pen/RwKvjJz但是当我将代码传输到 Visual Studio 时现在未通过 1 次测试。是的，该应用程序似乎可以正常工作，甚至可以成功编译。现在它没有通过 #6 的一项测试

当我按下与每个 .drum-pad 关联的触发键时，应触发包含在其子元素中的音频剪辑（例如，按下 Q 键应触发包含字符串“Q”的鼓垫，按下 W 键应触发包含弦“W”等的鼓垫）。

GitHub 回购：https ://github.com/korara78/drum-machine-fcc/tree/main/drum-machine-fcc

我注意到有两件事看起来很奇怪。首先，我必须将此代码添加到 index.html 文件中，以使代码能够成功编译。作为创建 React 应用程序的新手，到目前为止，我只需要在 index.html 文件上添加 1 个 div id。

<div id="drum-machine" class="container"></div>
<div id='root'></div>

作为回应，我尝试更改 index.js 和 App.js 文件上的导入/导出脚本，但当前代码是我可以生成的最好的代码，甚至可以使应用程序成功运行/编译。

其次，我注意到该应用程序在此处通过 GitHub 页面发布的应用程序网站上出现了“两次” https://korara78.github.io/drum-machine-fcc/ 当您在页面上向下滚动时它会出现两次。

非常感谢任何建议或帮助！

标签： javascripthtmlreactjs

解决方案

您ReactDOM.render(<App />, ...);多次调用，一次是在App.js中，一次是在index.js中。调用 render 两次会导致出现两个版本。

应用程序.js：

ReactDOM.render(<App />, document.getElementById('drum-machine'));

index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

删除 in 中的一个，如果您愿意App.js，将 in 更改为index.js。#drum-machine <div>

index.js是ReactDOM.render(...)应该被调用App.js的地方，是你应该定义App组件的地方。

推荐阅读