Javascript TypeError:props.tracks.map不是函数

我目前正在做一个基于创建Spotify播放列表的react应用程序练习。以下是主要代码库：

App.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“/App.css”；
从“../SearchBar/SearchBar”导入搜索栏；
从“../SearchResults/SearchResults”导入搜索结果；
从“../Playlist/Playlist”导入播放列表；
常数轨道={
姓名：“你好”，
艺术家：“再一次”，
专辑：“朋友的朋友”，
身份证号码：0
};
常数轨道=[轨道，轨道，轨道]；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：跟踪，
播放名称：“默认”，
播放曲目：曲目
};
this.addTrack=this.addTrack.bind（this）；
this.removeTrack=this.removeTrack.bind（this）；
}
添加轨迹（轨迹）{
this.state.playlitracks.map（id=>{
如果（track.id==id）
回来
});
this.setState（（状态，轨迹）=>({
播放曲目：状态。播放曲目。推送（曲目）
}));
}
拆卸支架（轨道）{
this.state.playlitracks.map（id=>{
如果（track.id==id）
{
this.setState（（状态，轨迹）=>({
播放曲目：状态。播放曲目。删除（曲目）
}));
}
});
}
render（）{
返回(
詹姆明
);
}
}
导出默认应用程序；

Playlist.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“/Playlist.css”；
从“../TrackList/TrackList”导入TrackList；
功能播放列表（道具）{
返回(
保存到SPOTIFY
);
}
导出默认播放列表；

从“React”导入React；
导入“/SearchBar.css”；
函数搜索栏（）{
返回(
搜索
);
}
导出默认搜索栏；

SearchBar.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“/SearchBar.css”；
函数搜索栏（）{
返回(
搜索
);
}
导出默认搜索栏；

SearchResults.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“./SearchResults.css”；
从“../TrackList/TrackList”导入TrackList；
功能搜索结果（道具）{
返回(
后果
);
}
导出默认搜索结果；

Track.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“/Track.css”；
类跟踪扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addTrack=this.addTrack.bind（this）；
this.removeTrack=this.addTrack.bind（this）；
}
addTrack（）{
this.props.onAdd（this.props.track）；
}
removeTrack（）{
this.props.onRemove（this.props.track）；
}
render（）{
返回(
{this.props.track.name}
{this.props.track.artist}{this.props.track.album}

+
-
);
}
}
导出默认轨迹；

TrackList.js

import React from 'react';
import './App.css';
import SearchBar from'../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

const track = {
  name: "Hello",
  artist: "Again",
  album: "Friend of a friend",
  id: 0
};

const tracks = [track, track, track];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: tracks,
      playlistName: "DEFAULT",
      playlistTracks: tracks
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

  addTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        return;
    });
    this.setState((state, track) => ({
      playlistTracks: state.playlistTracks.push(track)
    }));
  }

  removeTrack(track) {
    this.state.playlistTracks.map(id => {
      if(track.id === id)
        {
          this.setState((state, track) => ({
            playlistTracks: state.playlistTracks.remove(track)
          }));
        }
    });
  }

  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 name= {this.state.playlistName} tracks= {this.state.playlistTracks} onRemove= {this.removeTrack}/>
        </div>
      </div>
    </div>
  );
  }
}

export default App;

import React from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList';

function Playlist(props) {
    return (
        <div className="Playlist">
        <input value="New Playlist"/>
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
        <TrackList tracks= {props.tracks} onRemove= {props.onRemove} isRemoval= {true}/>
        </div>
    );
}

export default Playlist;

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

function SearchBar () {
        return (
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        );
}

export default SearchBar;

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults (props) {
        return (
            <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={props.searchResults} onAdd= {props.onAdd} isRemoval= {false}/>
            </div>
        );
}

export default SearchResults;

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

class Track extends React.Component {
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }

    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                    <div className="Track-information">
                        <h3>{ this.props.track.name }</h3>
                        <p>{ this.props.track.artist } | { this.props.track.album }</p>
                        <div onClick= {this.addTrack}>+</div>
                        <div onClick= {this.removeTrack}>-</div>
                    </div>
            </div>
        );
}
}

export default Track;

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

function TracklList (props) {
        return (
            <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track 
                        track={track} 
                        key={track.id} 
                        onAdd= {props.onAdd} 
                        onRemoval= {props.onRemoval}
                        isRemove= {props.isRemove}
                    />;
                })
            }
            </div>
        );
}

export default TracklList;

从“React”导入React；
导入“./TrackList.css”；
从“../Track/Track”导入轨迹；
功能Tracklist（道具）{
返回(
{
props.tracks.map（track=>{
回来
})
}
);
}
导出默认轨迹列表；

目前，这是一个非常基本的应用程序，但到目前为止，我正在尝试测试某些功能。我正在尝试测试将结果部分的歌曲添加到播放列表中的过程。但是，当我单击其中一首歌曲上的加号图标时，出现以下错误：

---

这个bug只有在我单击加号图标后才会弹出，所以我最初的假设是我正在将状态对象从一个数组更改为一个列表。然而，我不知道情况如何。无论如何，到目前为止，我绝对可以使用第二种意见

Array.push

对调用数组进行变异，并返回一个指示新数组长度的数字

在

addTrack

方法中，旧的

playlitracks

状态发生了变化，新状态被设置为一个数字，而不是新数组

使用排列语法以不变的方式向数组中添加新项

另外，

setState

接受新状态，或者接受旧状态并返回新状态的函数，应从

addTrack

方法接收跟踪

p/S:setState上方的

.map

似乎无法正常工作

addTrack（轨道）{
/* 
*注意：下面的代码不影响任何东西，因为“map”
*将应用于每个项目，并且在返回时不会停止`
*此外，“playlitracks”似乎是一个对象数组，但是
*此处用作字符串数组
*/
this.state.playlitracks.map（id=>{
如果（track.id==id）
回来
});
this.setState（（state/*，track——我认为应该删除它*/）=>({
//旧代码：playlitracks:state.playlitracks.push（曲目）
playlitracks:[…state.playlitracks，track]
}));
}