Блог

Я создаю это музыкальное приложение из онлайн-видеоурока Simplilearn, но при этом я получил одну ошибку синтаксического анализа, поэтому любой может подсказать мне, что делать… мне нужно было изменить имя класса или функции?

Ошибка синтаксического анализа: идентификатор «Приложение» уже объявлен

 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 =gt; {  this.setState({ SearchResults: SearchResults });  });  }   addTrack(track) {  let tracks = this.state.playlistTracks;  if(tracks.find( savedTrack =gt; 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 =gt; currentTrack.id !== track.id );  trackSearch.unshift(track);  this.setState({ playlistTracks: tracks });  }   removeTrackSearch(track) {  let tracks = this.state.SearchResults;  tracks = tracks.filter( currentTrack =gt; 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 =gt; track.uri );  Spotify.savePlaylist(this.state.playlistName, trackUris).then( () =gt; {  this.setState({  updatePlaylistName: "new Playlist",  playlistTracks: []  });  });  } }    function App() {  return (  lt;divgt;  lt;h1gt;  lt;a href = "https://localhost:3000" gt;Musicophilelt;/agt;  lt;/h1gt;   lt;div className="App"gt;  lt;SearchBar onSearch={this.search} /gt;   lt;div className="App-playlist"gt;   lt;SearchResults  SearchResults={this.state.SearchResults}  onAdd={this.doThese} /gt;   lt;Playlist  playlistTracks={this.state.playlistTracks}  onNameChange={this.updatePlaylistName}  onRemove={this.removeTrack}  onSave={this.savePlaylist} /gt;   lt;/divgt;  lt;/divgt;  lt;/divgt;  );  }  export default App;  

Вы пытаетесь инициализировать две переменные ( App в данном случае) с одинаковым именем. Переименуйте один из ваших компонентов во что-то другое.

Теперь первоначальный вопрос решен, и вот что самое сложное. В коде так много ошибок, помимо дублированного кода App .

1. Компонент класса App не имеет render функции.
2. Смешивание функциональных компонентов и компонентов класса. Это сработает, но это просто плохая практика.
3. Мутация состояния. например

 let tracks = this.state.playlistTracks; // ... omitted tracks.push(track); // NO!!!!!  

4. Непригодное import заявление. Я не уверен, что вы намеренно удалили часть импорта или что-то еще, но если вы скопируете и вставите импорт напрямую, он демонстративно потерпит неудачу.
5. Использование this в функциональном компоненте.