reactjs - 函数 CollectionReference.add() 要求其第一个参数为 object 类型，但它是 : undefined

Question

我想将图像存储在 firebase 存储中，并在 firestore 中传递其 URL 引用。因此，我可以在存储中上传图像，但无法在 cloud 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 spread 运算符解决了这个问题:

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

}

希望这对您有帮助。