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

Question

使用一个项目，您可以在Spotify数据库中搜索歌曲，将其添加到播放列表，然后将播放列表添加到您的帐户，我在尝试将歌曲添加到播放列表时遇到错误。搜索代码以查找和推理，并添加控制台日志以查看其出错的位置。似乎在render语句中，状态元素playlistTracks从包含其中添加的歌曲的Array更改为对象，仅更改为整数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

error可能是一行中pushing和mutating state的结果。

尝试：

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

Answer 2

Array.prototype.push返回数组中新的元素数。它不会返回数组本身。您正在将状态设置为返回值，即1。

以下是一些例子来说明正在发生的事情：

您期望发生的事情：

let someArray = [];
someArray.push('something');
console.log(someArray); // -> ['something']

但你实际上做的是类似于：

let someArray = [];
someArray = someArray.push('something');
console.log(someArray); // -> 1