跟随Simplilearn教程开发React音乐APP遇App重复声明错误如何解决

错误原因 #

你的报错核心是同一作用域下重复声明了同名标识符App：你先定义了类组件class App，后续又定义了同名的函数组件function App()，JavaScript语法不允许同一作用域内重复声明同类标识符。不需要随意修改类/函数名，你是把类组件的render()方法错误拆成了单独的App函数，合并结构即可解决。

修复步骤 #

• 修正类继承语法错误：class App extends Component()尾部多余括号，改为class App extends Component
• 删除单独的function App()声明，将其内部的JSX代码作为类组件的render()方法内容
• 修正state更新逻辑错误：你在updatePlaylistName和savePlaylist方法中，错误将playlistName的key写为updatePlaylistName，需要改为对应state中声明的key
• 删除导入行的无效代码`enter code here`

修复后完整代码 #

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

// 后续请补充各组件的正确导入路径
import Playlist from '';
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) {
    // 修正state的key为playlistName
    this.setState({ playlistName: name });
  }

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

  // 新增render方法，把原来的function App的内容移到这里
  render() {
    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;

内容的提问来源于stack exchange，提问作者Vrushik Sagar