javascript - 解析错误：标识符“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:\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>

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

class App extends React.Component{

和

function App() {

因此，识别您所指的内容存在问题。您要么需要重命名这些位置之一，要么决定要使用什么（类或函数）。

score 0 · Accepted Answer

在您的代码中，您声明了 App 类，然后声明了 App 函数。所以它给了那个 App 已经被声明了。

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

所以你可以这样做，

重命名任何一个
删除任何一个
用类或函数的不同名称在类内声明函数

score -1 · Accepted Answer

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

javascript - 解析错误：标识符“App”已被声明

4 回答 4

Related

Reference