解析错误：标识符“App”已经宣布了
我是 React.js 的初学者；我正在构建一个简单的音乐播放器应用程序，但在 App.js 文件中它给了我一个错误。下面我分享App.js文件的代码和浏览器生成的错误。
import React, { Component } from 'react'
import './App.css';
import PlayList from "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"
class App extends React.Component{
//code to be written
}
function App() {
return (
<div>
<h1>
<a href="http://localhost:3000">Melophile</a>
</h1>
<div className="App">
<SearchBar onSearch={this.search}/>
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
<PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
</div>
</div>
</div>
);
}
export default App;
浏览器错误：
Compiled with problems:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)
11 | }
12 |
> 13 | function App() {
| ^
14 | return (
15 | <div>
16 | <h1>
寻求高手帮忙解决这个问题。
I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.
import React, { Component } from 'react'
import './App.css';
import PlayList from "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"
class App extends React.Component{
//code to be written
}
function App() {
return (
<div>
<h1>
<a href="http://localhost:3000">Melophile</a>
</h1>
<div className="App">
<SearchBar onSearch={this.search}/>
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
<PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
</div>
</div>
</div>
);
}
export default App;
Browser error:
Compiled with problems:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)
11 | }
12 |
> 13 | function App() {
| ^
14 | return (
15 | <div>
16 | <h1>
Looking for experts help to solve this problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您看到的错误是因为您有以下两件事：
因此
，在识别您所指的内容时存在问题。您要么需要重命名这些位置之一，要么决定要使用的内容（类或函数）。
The error you are seeing is because you have these two things:
And
Therefore, there is a problem identifying what you are referring to. You either need to rename one of these places or decide what you want to work with (class or functions).
您有一个名为
App的类和一个名为App的函数。不能让两个东西同名。看来您所做的是将基于类的 React 语法与更现代的函数语法混合在一起。由于您还没有在类中编写任何内容，因此可以安全地假设您实际上并未使用基于类的语法，因此您可以简单地删除该类（删除以下内容）
You have a class named
Appand a function namedApp. You can't have two things named the same.What it appears you've done is mixed class-based React syntax with more modern functional syntax. Since you don't have anything written inside the class yet, it seems safe to assume you're not actually using class-based syntax, so you can simply remove the class (delete the following)
在您的代码中，您声明了 App 类，然后声明了 App 函数。因此，该应用程序已被声明。
所以你可以这样做，
In your code you declared App class and then declare App function. So It's giving that App is already declared.
So you can do,
您可以使用基于类的组件或基于钩子的组件。你不能混合使用它们。
您可以查找更多详细信息.. https://reactjs.org/docs/hooks-intro .html
you can use class based component or hook based component. you can't use mix of them.
you can look for more detail information.. https://reactjs.org/docs/hooks-intro.html