Javascript this.setState不是函数-Firebase获取文档错误
我是React的新手。 我的项目只是允许多个人同时听音乐。我设法通过Spotify建立了api连接，但我将房间的信息保存在firebase上。因此，我需要从firebase获取文件室的创建者，即roomAdminMail信息。当我试图像在主页上一样检索房间信息时，我会遇到这样的错误Javascript this.setState不是函数-Firebase获取文档错误,javascript,reactjs,firebase,Javascript,Reactjs,Firebase,我是React的新手。 我的项目只是允许多个人同时听音乐。我设法通过Spotify建立了api连接，但我将房间的信息保存在firebase上。因此，我需要从firebase获取文件室的创建者，即roomAdminMail信息。当我试图像在主页上一样检索房间信息时，我会遇到这样的错误 import React, {Component} from "react"; import { Grid, Typography, Card, IconB
import React, {Component} from "react";
import {
Grid,
Typography,
Card,
IconButton,
LinearProgress,
} from "@material-ui/core";
import Spotify from 'spotify-web-api-js';
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import PauseIcon from "@material-ui/icons/Pause";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import firebase from 'firebase';
import {GridItem} from '@chakra-ui/react';
const spotifyWebApi = new Spotify();
//const Player = props =>
class Player extends Component {
constructor(){
super();
const params = this.getHashParams();
this.state = {
logeedIn : params.access_token ? true : false,
currentStatus: false,
roomAdminMail: "",
roomName: "",
roomInfo: "",
nowPlaying: {
artist_name : 'Not Checked',
song_name: 'Not Checked',
image: ''
}
}
if(params.access_token){
spotifyWebApi.setAccessToken(params.access_token)
}
}
getHashParams() {
var hashParams = {};
var e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ( e = r.exec(q)) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}
return hashParams;
}
getNowPlaying(){
spotifyWebApi.getMyCurrentPlayingTrack()
.then((response) => {
this.setState({
nowPlaying: {
artist_name: response.item.artists[0].name,
song_name: response.item.name,
image: response.item.album.images[0].url
}
})
})
}
getRoomCollection(){
const db = firebase.firestore();
db.collection("rooms").onSnapshot(function(querySnapshot) {
this.setState(querySnapshot.docs.map((doc) => ({
roomAdminMail: doc.data().roomAdminMail,
roomName: doc.data().roomName,
roomInfo: doc.data().roomInfo
})));
})
}
componentDidMount(){
this.getNowPlaying();
this.getRoomCollection();
}
render() {
return (
<GridItem
colStart={[1, null, null, 2, null, null]}
colSpan={[3, null, null, 1, null, null]}
p={6}
>
<a href='http://localhost:8888'>
<button>Login With Spotify</button>
</a>
<Typography component="h5" variant="h5">
Room Admin: {this.state.roomAdminMail}
</Typography>
<Card item align="center">
<Grid container alignItems="center">
<Grid item align="center" xs={12} className="now-playing__img">
<img src={this.state.nowPlaying.image} />
</Grid>
<Grid item align="center" xs={8}>
<Typography item align="center" component="h5" variant="h5">
{this.state.nowPlaying.song_name}
</Typography>
<Typography item align="center" color="textSecondary" variant="subtitle1">
{this.state.nowPlaying.artist_name}
</Typography>
<div>
<IconButton
onClick={() => { spotifyWebApi.skipToPrevious();
{this.getNowPlaying()}
}}
>
<SkipPreviousIcon />
</IconButton>
<IconButton
onClick={() => { spotifyWebApi.play();
{this.getNowPlaying()}
}}
>
<PlayArrowIcon />
</IconButton>
<IconButton
onClick={() => { spotifyWebApi.pause();
{this.getNowPlaying()}
}}
>
<PauseIcon />
</IconButton>
<IconButton onClick={() => spotifyWebApi.skipToNext()}>
{this.getNowPlaying()}
<SkipNextIcon />
</IconButton>
</div>
</Grid>
</Grid>
</Card>
</GridItem>
);
}
}
export default Player;
import React，{Component}来自“React”；
进口{
网格，
排版，
卡片
IconButton，
直线前进，
}来自“@材料界面/核心”；
从“Spotify web api js”导入Spotify；
从“@material ui/icons/PlayArrow”导入播放箭头图标；
从“@material ui/图标/暂停”导入暂停图标；
从“@material ui/icons/SkipNext”导入SkipNextIcon；
从“@material ui/icons/SkipPrevious”导入SkipPreviousIcon；
从“firebase”导入firebase；
从“@chakra ui/react”导入{GridItem}；
const spotifyWebApi=new Spotify（）；
//康斯特玩家=道具=>
类播放器扩展组件{
构造函数（）{
超级（）；
const params=this.getHashParams（）；
此.state={
logeedIn:params.access_令牌？true:false，
当前状态：false，
roomAdminMail:“”，
房间名：“，
房间信息：“，
正在播放：{
艺术家名称：“未选中”，
song_名称：“未选中”，
图像：“”
}
}
if（参数访问令牌）{
spotifyWebApi.setAccessToken（params.access\u token）
}
}
getHashParams（）{
var hashParams={}；
变量e，r=/（[^&；=]+）=？（[^&；]*）/g，
q=window.location.hash.substring（1）；
while（e=r.exec（q））{
hashParams[e[1]]=decodeURIComponent（e[2]）；
}
返回hashParams；
}
getNowPlaying（）{
spotifyWebApi.getMyCurrentPlayingTrack（）文件
。然后（（响应）=>{
这是我的国家({
正在播放：{
艺术家名称：response.item.artists[0]。名称，
song_name:response.item.name，
图像：response.item.album.images[0]。url
}
})
})
}
getRoomCollection（）{
const db=firebase.firestore（）；
数据库收集（“房间”）.onSnapshot（功能（查询快照）{
this.setState（querySnapshot.docs.map）（（doc）=>({
roomAdminMail:doc.data（）.roomAdminMail，
roomName:doc.data（）.roomName，
roomInfo:doc.data（）.roomInfo
})));
})
}
componentDidMount（）{
这个。getNowPlaying（）；
这是一个.getRoomCollection（）；
}
render（）{
返回(
房间管理员：{this.state.roomAdminMail}
{this.state.nowPlaying.song_name}
{这个。州。正在播放。艺术家_name}
{spotifyWebApi.skipToPrevious（）；
{this.getNowPlaying（）}
}}
>
{spotifyWebApi.play（）；
{this.getNowPlaying（）}
}}
>
{spotifyWebApi.pause（）；
{this.getNowPlaying（）}
}}
>
spotifyWebApi.skipToNext（）}>
{this.getNowPlaying（）}
);
}
}
导出默认播放器；
此constructor（）{
this.getRoomCollection=this.getRoomCollection.bind（this）；
this.getNowPlaying=this.getNowPlaying.bind（this）；
}
getRoomCollection=（）=>{
const db=firebase.firestore（）；
数据库集合（“房间”）.onSnapshot（（querySnapshot）=>{
this.setState（querySnapshot.docs.map）（（doc）=>({
roomAdminMail:doc.data（）.roomAdminMail，
roomName:doc.data（）.roomName，
roomInfo:doc.data（）.roomInfo
})));
})
}
此constructor（）{
this.getRoomCollection=this.getRoomCollection.bind（this）；
this.getNowPlaying=this.getNowPlaying.bind（this）；
}
getRoomCollection=（）=>{
const db=firebase.firestore（）；
数据库集合（“房间”）.onSnapshot（（querySnapshot）=>{
this.setState（querySnapshot.docs.map）（（doc）=>({
roomAdminMail:doc.data（）.roomAdminMail，
roomName:doc.data（）.roomName，
roomInfo:doc.data（）.roomInfo
})));
})
}
getNowPlayinggetRoomCollectiongetNowPlayinggetRoomCollection