解析错误：标识符"App"已被声明

Question

我是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:UsersAFRIDIOneDriveDesktopSTUDY NOTESSEM - 4Minor Project - 1melophile-appsrcApp.js: Identifier 'App' has already been declared. (13:9)
11 | }
12 |
> 13 | function App() {
|          ^
14 |   return (
15 |     <div>
16 |       <h1>

寻找专家来帮助解决这个问题。

Answer 1

您看到的错误是因为您有以下两件事：

class App extends React.Component{

和

function App() {

因此，识别你所指的是什么是一个问题。你要么需要重命名其中一个位置，要么决定要使用什么(类或函数(。

Answer 2

您有一个名为App的类和一个名称为App的函数。你不可能有两个名字相同的东西。

您所做的似乎是将基于类的React语法与更现代的函数语法混合在一起。由于您还没有在类中编写任何内容，因此可以放心地假设您实际上没有使用基于类的语法，因此您可以简单地删除类(删除以下内容(

class App extends React.Component{
//code to be written
}

Answer 3

在代码中声明了App类，然后声明了App函数。因此，它给出的应用程序已经声明。

class App extends React.Component{
//code to be written
}

function App() {

所以你可以，

1. 重命名任意一个
2. 删除任何一个
3. 用类或函数的diff名称声明类内的函数

Answer 4

您可以使用基于类的组件或基于钩子的组件。你不能把它们混合使用。你可以查找更多详细信息。。https://reactjs.org/docs/hooks-intro.html