Parsing Error : Identifier 'App' has already been declared

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:\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>

求高手帮忙解决这个问题

Answer 1

您有一个名为 App 的 class 和一个名为 App 的函数。两件事不能同名。

您所做的似乎是 class-based React 语法与更现代的函数式语法的混合。由于您还没有在 class 中写入任何内容，因此可以安全地假设您实际上并未使用 class-based 语法，因此您可以简单地删除 class （删除以下内容)

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

Answer 2

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

class App extends React.Component{

和

function App() {

因此，无法识别您所指的内容。您要么需要重命名这些地方之一，要么决定要使用的内容（class 或函数）。

Answer 3

在您的代码中，您声明了 App class，然后声明了 App 函数。所以它给出了应用程序已经声明。

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

所以你可以做到，

重命名任意一个
删除任何一个
在 class 内声明函数，差异名称为 class 或函数

Answer 4

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

Parsing Error : Identifier 'App' has already been declared

Parsing Error : Identifier 'App' has already been declared

javascript

parsing-error

reactjs