javascript - 随机将状态元素更改为 1 的代码

Question

我正在处理一个项目，该项目允许您在 Spotify 数据库中搜索歌曲，将其添加到播放列表，然后将播放列表添加到您的帐户，我在尝试将歌曲添加到播放列表时遇到错误。通过代码查找和推理，并添加控制台日志以查看哪里出错了。似乎在渲染语句中，状态元素 playlistTracks 已从将其中添加的歌曲作为对象的数组更改为整数 1。此图显示了控制台日志的进程:

这是来自 App.js 的代码:

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


class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			searchResults: [],
			playlistName: 'New Playlist',
			playlistTracks: []
		}
		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.search = this.search.bind(this);
	}

	addTrack(track) {
		console.log(track);
		if(this.state.playlistTracks.length !== 0) {
			const ids = Playlist.collectIds(this.state.playlistTracks);
			let newId = true;
			for(let i = 0; i < ids.length; i++) {
				if(ids[i] === track.id) {
					newId = false;
				}
			}
			if(newId) {
				this.setState({playlistTracks: this.state.playlistTracks.push(track)});
			}
		} else {
			this.setState({playlistTracks: this.state.playlistTracks.push(track)});
		}
		console.log(this.state.playlistTracks);
	}

	removeTrack(track) {
		const ids = Playlist.collectIds(this.state.playlistTracks);
		let trackIndex = -1;
		for(let i = 0; i < ids.length; i++) {
			if (ids[i] === track.id) {
				trackIndex = i;
			}
		}
		if (trackIndex !== -1) {
			const newPlaylist = this.state.playlistTracks.splice(trackIndex, 1);
			this.setState({playlistTracks: newPlaylist});
		}
	}

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

	savePlaylist() {
		let trackURIs = [];
		for(let i = 0; i < this.state.playlistTracks.length; i++) {
			trackURIs.push(this.state.playlistTracks[i].uri);
		}
		Spotify.savePlaylist(this.state.playlistName, trackURIs);
		this.setState({playlistName: 'New Playlist', playlistTracks: []});
	}

	async search(term) {
		const results = await Spotify.search(term);
		this.setState({searchResults: results});
	}

	render() {
		return (
			<div id="root">
  				<h1>Ja<span className="highlight">mmm</span>ing</h1>
  				<div className="App">
    				<SearchBar onSearch={this.search} />
    				<div className="App-playlist">
    				{console.log(this.state.playlistTracks)}
      					<SearchResults searchResults={this.state.searchResults} onAdd={this.addTrack} />
      					<Playlist 
      						playlistName={this.state.playlistName}
      						playlistTracks={this.state.playlistTracks}
      						onRemove={this.removeTrack}
      						onNameChange={this.updatePlaylistName}
      						onSave={this.savePlaylist}
      					/>
    				</div>
  				</div>
			</div>
		);
	}
}

export default App;

Answer 1

错误 可能是一行中push 和mutating state 的结果。

尝试:

// Add Track.
addTrack = (track) => this.setState({playlistTracks: [...this.state.playlistTracks, track]})