reactjs 该文件在程序中的原因是:为编译指定的根文件

jhdbpxl9  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(256)

每次我试图编译代码时,我总是得到这个错误,尽管大小写和拼写都是正确的。
文件名:'c:/Users/liver/Desktop/Codecademy/React, Part I/Create a Playlist App With the Spotify API (Part One) - Project/create-react-app/Jamming/src/Components/Playlist/Playlist.js'
与已包含的文件名不同:'c:/Users/liver/Desktop/Codecademy/React, Part I/Create a Playlist App With the Spotify API (Part One) - Project/create-react-app/Jamming/src/Components/PlayList/Playlist.js'仅在 shell 中。
该文件在程序中的原因是:为编译指定的根文件通过'../Playlist/Playlist'从文件'c:/Users/liver/Desktop/Codecademy/React, Part I/Create a Playlist App With the Spotify API (Part One) - Project/create-react-app/Jamming/src/Components/App/App.js '导入
下面是我的代码:

import React from 'react';
import './App.css';

import SearchBar from './SearchBar/SearchBar';
import SearchResults from './SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

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

   this.state = {
    searchResults: [{name: 'name1', artist: 'artist1', album: 'album1', id: 1}
    , {name: 'name2', artist: 'artist2', album: 'album2', id: 2}, 
    {name: 'name3', artist: 'artist3', album: 'album3', id: 3}],
    PlaylistName: 'My Playlist',
    PlaylistTracks: [{ name: 'playlistName1', artist: 'playlistArtist1', 
    album: 'playlistAlbum1', id: 4 }, {name: 'playlistName2', artist: 'playlistArtist2', album: 'playlistAlbum2', id: 5 },
    {name: 'playlistName3', artist: 'playlistArtist3', album: 'playlistAlbum3', id: 6 }]
   };
   this.addTrack = this.addTrack.bind(this);
  }

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

render() {
  return (
    <div>
    <h1>Ja<span className="highlight">mmm</span>ing</h1>
    <div className="App">
       <SearchBar /> 
      <div className="App-playlist">
       <SearchResults searchResults={this.state.searchResults} 
                        onAdd ={this.addTrack} />  
        <Playlist PlaylistName={this.state.PlaylistName} 
                  PlaylistTracks={this.state.PlaylistTracks} /> 
      </div>
    </div>
  </div> 
  )
  }
}

export default App;

我尝试改变大小写在第一次从播放列表到播放列表,但在检查我的文件目录niether播放列表. js或播放列表. css文件有任何大写在他们的名字

6yt4nkrj

6yt4nkrj1#

此错误可能是由于文件路径中的大小写敏感性问题。在您的错误消息中,“播放列表”目录的情况有所不同:

'.../Components/Playlist/Playlist.js'
'.../Components/PlayList/Playlist.js'

注意“Playlist”和“PlayList”大小写的区别。许多系统(如基于Unix的系统,包括MacOS和大多数Linux发行版)中的文件路径是区分大小写的。这意味着'PlayList'和'Playlist'将引用两个不同的目录。
解决方案是确保import语句中的大小写与实际文件路径的大小写完全匹配。
我希望这对你有用。

相关问题