-1

我正在根据 Simplilearn 的在线视频教程制作这个音乐应用程序，但是在执行此操作时遇到了一个解析错误，因此任何人都可以建议我该怎么做……我是否必须更改类或函数的名称？

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

import React,{ Component } from 'react';
import './App.css';

import Playlist from '';`enter code here`
import SearchBar from '';
import SearchResults from '';
import Spotify from '';


class App extends Component() {
    constructor(props) {
      super(props);

      this.state = {
        SearchResults: [],
        playlistName: "new Playlist",
        playlistTracks: []
      };

      this.search = this.search.bind(this);
      this.addTrack = this.addTrack.bind(this);
      this.removeTrack = this.removeTrack.bind(this);
      this.updatePlaylistName = this.updatePlaylistName.bind(this);
      this.savePlaylist = this.savePlaylist.bind(this);
      this.removeTrackSearch = this.removeTrackSearch.bind(this);
      this.doThese = this.doThese.bind(this);
    }

    search(term) {
      Spotify.search(term).then( SearchResults => {
          this.setState({ SearchResults: SearchResults });
      });
    }

    addTrack(track) {
      let tracks = this.state.playlistTracks;
      if(tracks.find( savedTrack => savedTrack.id === track.id )){
        return;
      }
      tracks.push(track);
      this.setState({ playlistTracks: tracks });
    }

    removeTrack(track) {
      let tracks = this.state.playlistTracks;
      let trackSearch = this.state.SearchResults;
      tracks = tracks.filter( currentTrack => currentTrack.id !== track.id );
      trackSearch.unshift(track);
      this.setState({ playlistTracks: tracks });
    }

    removeTrackSearch(track) {
      let tracks = this.state.SearchResults;
      tracks = tracks.filter( currentTrack => currentTrack.id !== track.id );
      this.setState({ SearchResults: tracks });
    }

    doThese(track) {
      this.addTrack(track);
      this.removeTrackSearch(track);
    }

    updatePlaylistName(name) {
      this.setState({ updatePlaylistName: name });
    }

    savePlaylist() {
      const trackUris = this.state.playlistTracks.map( track => track.uri );
      Spotify.savePlaylist(this.state.playlistName, trackUris).then( () => {
        this.setState({
          updatePlaylistName: "new Playlist",
          playlistTracks: []
        });
      });
    }
}


 function App() {
    return (
      <div>
        <h1>
          <a href = "https://localhost:3000" >Musicophile</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;
4

1 回答 1

0

您正在尝试初始化两个App具有相同名称的变量（在本例中）。将其中一个组件重命名为其他组件。

现在原始问题解决了，这是困难的部分。除了重复的 . 之外，代码还有很多问题App。

  1. 类组件App没有render功能。
  2. 混合函数组件和类组件。它会起作用，但这只是不好的做法。
  3. 状态突变。例如
let tracks = this.state.playlistTracks;
// ... omitted
tracks.push(track); // NO!!!!!
  1. 无法使用的import语句。我不确定你是故意删除了导入部分还是什么，但是如果你直接复制并粘贴导入，它肯定会失败。
  2. this在功能组件中使用。
于 2021-11-26T08:13:43.777 回答