时间戳

首页 > 解决方案 > 当使用 arrayUnion 将元素添加到 firestore 中的 arrayField 时，我得到 TypeError default.collection is not a function

reactjs - 当使用 arrayUnion 将元素添加到 firestore 中的 arrayField 时，我得到 TypeError default.collection is not a function

问题描述

我正在使用带有 firebase 的 ReactJs 制作应用程序。在 updatePlayers 中，我完全按照 firebase 文档将元素添加到数组中。在 Firestore 中，我有一个名为 footballgames 的集合，其中包含一个名为 C3j5hXxNFKMBUM7YxaNX 的游戏文档。它包含一个包含玩家数组的数组字段，我想在调用该函数时将“John”添加到数组中。但是我不断收到错误 TypeError: _firebase_firebase_utils__WEBPACK_IMPORTED_MODULE_5__.default.collection is not a function

import React, { useState, useEffect, Fragment } from "react";
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
import GameDetails from "../../components/game-details/game-details.component";
import PlayerList from "../../components/player-list/player-list.component";
import firestore from '../../firebase/firebase.utils'
import * as firebase from 'firebase';
import 'firebase/firestore';

class GameDetailPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
    };
  }


  updatePlayers=()=>{
    var playersRef=firestore.collection("footballgames").doc("C3j5hXxNFKMBUM7YxaNX")
    playersRef.update({
      Players:firebase.firestore.FieldValue.arrayUnion("John")
    })
  }



  render() {
    const { games, currentUser } = this.props;
    let { linkUrl } = this.props.match.params;
    const gameObj = games[linkUrl];
    console.log("user", currentUser);


    return (
      <Fragment>
        <div className="game-list">
          <GameDetails game={gameObj} />
        </div>
        <h2>Current players</h2>
        {currentUser ? (
          <div className="player-list">
            {gameObj.Players.map((player, index) => (
              <PlayerList key={index} player={player} />
            ))}
          </div>
        ) : (
          <p>Loading</p>
        )}
        <button onClick={()=>this.updatePlayers()}>Join</button>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  games: state.games.games,
  currentUser: state.user.currentUser,
});

export default connect(mapStateToProps)(GameDetailPage);

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

该错误似乎与arrayUnion没有任何关系。使用您在此处显示的内容，这似乎不起作用（找不到方法集合）：

var playersRef = firestore.collection(...)

您将希望使用它来查找收集方法：

var playersRef = firebase.firestore.collection(...)

您的导入正在拉入其他内容并调用它firestore，它可能与以下内容不同firebase.firestore：

import firestore from '../../firebase/firebase.utils'

推荐阅读