javascript - 类型错误:this.props.* 不是函数
问题描述
我的代码中出现此错误
类型错误:this.props.* 不是函数
我无法弄清楚它有什么问题。我尝试了不同的方法,但即使我将函数“绑定”到“this”,但仍然给我这个错误。
SingleCurPlaylist.js
import React from "react";
import "./SingleCurPlaylist.css";
class SingleCurPlaylist extends React.Component {
constructor(props) {
super(props);
this.showList = this.showList.bind(this);
}
showList() {
this.props.showList(this.props.id);
}
render() {
return (
<div className="Single-list" onClick={this.showList}>
<h4>{this.props.name}</h4>
</div>
);
}
}
export default SingleCurPlaylist;
PlayistSpotify.js
import React from "react";
import SingleCurPlaylist from "../SingleCurPlaylist/SingleCurPlaylist";
import "./PlaylistSpotify.css";
class PlaylistSpotify extends React.Component {
constructor(props) {
super(props);
this.renderList = this.renderList.bind(this);
}
renderList() {
this.props.getLocalPlaylists();
}
render() {
return (
<div className="PlaylistSpotify">
<h2>Local Playlists</h2>
<button className="Playlist-get" onClick={this.renderList}>
Get your local playlist
</button>
{this.props.playlistLists.map((singlePlay) => (
<SingleCurPlaylist
showList={this.props.showList}
id={singlePlay.id}
key={singlePlay.id}
name={singlePlay.name}
/>
))}
</div>
);
}
}
export default PlaylistSpotify;
这是 App.js,一旦错误得到修复,“showList”应该会接收播放列表 ID
import React from "react";
import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import Spotify from "../../util/Spotify";
import PlaylistSpotify from "../PlaylistSpotify/PlaylistSpotify";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchInput: "",
searchResults: [],
playlistName: "New Playlist",
playlistTracks: [],
localPlaylists: [],
};
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);
this.getLocalPlaylists = this.getLocalPlaylists.bind(this);
}
addTrack(track) {
let newPlaylist = this.state.playlistTracks;
if (newPlaylist.find((playTrack) => playTrack.id === track.id)) {
return;
} else {
newPlaylist.push(track);
}
this.setState({ playlistTracks: newPlaylist });
}
showList(playlist) {
console.log(playlist);
}
removeTrack(track) {
let playlist = this.state.playlistTracks;
let newPlaylist = playlist.filter((playTrack) => playTrack.id !== track.id);
this.setState({ playlistTracks: newPlaylist });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
savePlaylist() {
const trackUris = this.state.playlistTracks.map((track) => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({
playlistName: "New Playlist",
playlistTracks: [],
});
});
}
// keep search after url updated
componentDidMount() {
Spotify.getAccessToken();
}
getLocalPlaylists() {
Spotify.getPlaylist().then((playlistLists) => {
let newList = playlistLists.items.map((playlist) => {
return {
name: playlist.name,
id: playlist.id,
};
});
this.setState({ localPlaylists: newList });
});
}
search(term) {
Spotify.search(term).then((searchResults) => {
// filters results in order not to show tracks already in the playlist
searchResults = searchResults.filter((track) => {
return this.state.playlistTracks.every((el) => el.uri !== track.uri);
});
this.setState({ searchResults: searchResults, searchInput: term });
});
}
render() {
return (
<div>
<h1>
Ja<span className="highlight">mmm</span>ing
</h1>
<div className="App">
{<SearchBar onSearch={this.search} />}
<div className="App-playlist">
{
<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}
showList={this.showList}
/>
}
{
<PlaylistSpotify
getLocalPlaylists={this.getLocalPlaylists}
playlistLists={this.state.localPlaylists}
/>
}
</div>
</div>
</div>
);
}
}
export default App;
谢谢你的帮助!
解决方案
在PlayistSpotify.js
文件中,在playlistLists
循环中,this.props.showList
未定义:
{this.props.playlistLists.map((singlePlay) => (
<SingleCurPlaylist
showList={this.props.showList} // this is undefined
id={singlePlay.id}
key={singlePlay.id}
name={singlePlay.name}
/>
))}
因为您没有从以下位置传递它App.js
:
{<PlaylistSpotify
getLocalPlaylists={this.getLocalPlaylists}
playlistLists={this.state.localPlaylists}
//showList is not passed
/>
}
推荐阅读
- sql-server - 将行转换为列
- corda - 分析 Corda 应用程序
- ios - UITableView 滚动后单元格 UIProgressView 不更新
- batch-file - (Batch) 如何将 `@Echo Off` 函数从一个 .bat 文件发送到另一个
- regression - 滚动回归和多重共线性
- regex - Web 服务响应中多行的正则表达式
- javascript - 用另一个更新选择列表 - Vue.js
- android - 查找时间是否在具有时区约束的时间范围内
- stm32 - CubeMx&Atollic 裸项目中的宏观可见性
- regex - 匹配正则表达式字母和数字