函数 CollectionReference.add() 要求它的第一个参数是对象类型，但它是：未定义

Question

我想将图像存储在 firebase 存储中，并将其 URL 引用传递到 firestore。因此，我可以在存储中上传图像，但无法在云 Firestore 中传递图像 URL 引用。

import React , {Component} from 'react';
import fire from './../fire'
import Uploadimg from './Uploadimg'

class Adproduct extends Component{

  geturl = (imurl) =>{
      this.setState({
          img:imurl
        });
  }
  submit = e =>{
      e.preventDefault()
      var db= fire.firestore();

      db.settings({
        timestampsInSnapshots: true
           });

      db.collection('newproducts').add(this.State)
      .then(res =>{
          console.log(res.id)

          this.props.submit()
      })
      .catch(err =>{
          console.log('something went wrong',err)
      })
  }
  takedata = e =>{
      this.setState({
          [e.target.name]: e.target.value 
      });
  }

  constructor(props){
      super(props);
      this.state ={
          name:'',
          productdetails:'',
          size:'',

      }
  }

  render() {

      return (
          <div className="container w3-padding">

          <div className="row w3-padding">
          <div className="col-md-6 w3-padding">
                   <h3 className="w3-tag w3-padding w3-center">Add New</h3>
              <form className="w3-container" onSubmit={this.submit}>

                     <label className="w3-text-blue"><b>Name</b></label>
                <input className="w3-input w3-border" type="text" name="name" value={this.state.name} onChange={this.takedata} required/>

                <label className="w3-text-blue"><b>productdetails</b></label>
                <input className="w3-input w3-border" type="text" name="productdetails" value={this.state.productdetails} onChange={this.takedata} required/>

            <label className="w3-text-blue"><b>size available</b></label>
            <input className="w3-input w3-border" type="text" name="size" value={this.state.size} onChange={this.takedata} required/>


                   <br/>
                   <Uploadimg geturl={this.geturl} />
                   <br/>
                    <button className="w3-btn w3-blue">Add</button>

                 </form>
          </div>
          </div>
          </div>
      );
  }

}
export default Adproduct;

Answer 1

如果接受的答案对您没有帮助，您可能遇到了与我相同的问题。

我通过使用 typescript 展开运算符解决了这个问题：

add(wizard: Wizard): Promise<DocumentReference> {
return this.wizardCollection.add({...wizard});

}

希望对你有所帮助。

Answer 2

如果您忘记在项目中创建数据库，可能会发生这种情况... 它发生在我身上 - 我复制了项目密钥 - 但忘记在项目中实际创建数据库......在我创建数据库之后 - 它解决了......

Answer 3

使用

db.collection('newproducts').add({...this.State})

而不是

db.collection('newproducts').add(this.State)

Answer 4

它对我很有效。

进入数据库 -> 规则 ->

更改允许读、写：如果为假；为真；

Answer 5

这可能是因为您没有创建任何数据库或没有权限从“规则”选项卡下读取/写入数据库，即

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Answer 6

您应该创建 Firestore 数据库，允许读取、写入规则，并将其配置到您的项目中。然后你可以使用下面的扩展运算符来保存。

saveStudent(student: Student) {
    return new Promise<Student> ((resolve, reject) => {
      this.fireStore.collection('students').add({...student}).then(res => {}, err => reject(err));
    });
  }

Answer 7

来自documentation

要使用自定义类，您必须为您的类定义一个FirestoreDataConverter 函数。例如：

class City {
    constructor (name, state, country ) {
        this.name = name;
        this.state = state;
        this.country = country;
    }
    toString() {
        return this.name + ', ' + this.state + ', ' + this.country;
    }
}

// Firestore data converter
var cityConverter = {
    toFirestore: function(city) {
        return {
            name: city.name,
            state: city.state,
            country: city.country
            }
    },
    fromFirestore: function(snapshot, options){
        const data = snapshot.data(options);
        return new City(data.name, data.state, data.country)
    }
}

用你的写操作调用你的数据转换器：

// Set with cityConverter
db.collection("cities").doc("LA")
  .withConverter(cityConverter)
  .set(new City("Los Angeles", "CA", "USA"));