Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined in react (firestore)

Question

I am working on a project where I am taking inputs(texts and files) through a form from different users and storing it on cloud firestore. I've successfully been able to store images from different users on firebase storage but now I am required to retrieve and put the image urls corresponding to different users on the firestore database. I am able to log the urls on console but when i try to add them to the database I get an error. I am using the following code:

    state ={
    selectedFile1:null,

  }

  fileSelectedHandler1 = e =>{
    this.setState({
      selectedFile1: e.target.files[0]
    })
fileUploadHandler1=()=>{
    const storageRef = storage.ref('images/');
    const fileRef = storageRef.child(this.state.selectedFile1.name)
    var uploadTask=fileRef.put(this.state.selectedFile1)
    uploadTask.on('state_changed', function(snapshot){
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log('Upload is ' + progress + '% done');
      switch (snapshot.state) {
        case firebase.storage.TaskState.PAUSED: // or 'paused'
          console.log('Upload is paused');
          break;
        case firebase.storage.TaskState.RUNNING: // or 'running'
          console.log('Upload is running');
          break;
      }
    }, function(error) {
      console.log(error);
    }, function() {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log('File available at', downloadURL);
        this.setState({downloadURL})

      });
    });

  }

<Input type="file" name="image1" id="image2" onChange={this.fileSelectedHandler1}/>
        <button onClick={this.fileUploadHandler1}>Upload</button>

//uploading data to firestore through onSubmit form

addProd = e => {
    e.preventDefault();
    const db = firebase.firestore();
  
    const userRef = db.collection("Users").add({
        prodname: this.state.prodname,
        prodprice: this.state.prodprice,
        prodcat: this.state.selectedView,
        prodsize: this.state.prodsize,
        proddetails: this.state.proddetails,
        prodsubcat: this.state.prodsubcat,
        prodimgurl: this.state.downloadURL

    });  
    this.setState({
        prodname:'',
        prodprice:'',
        prodsize:'',
        proddetails:'',
        prodsubcat:'',
        selectedView:'Men',

    });
  };

score 1 · Answer 1 · answered Nov 21 '20 at 20:32

You have three calls to this.setState() in the code here. I'll take a guess at which one the error message is referring to (though that is something you should point out in your question).

Here is your file upload completion callback:

    }, function() {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log('File available at', downloadURL);
        this.setState({downloadURL})

      });

You are using the function keyword here instead of an arrow function like you are in other places. This will change the meaning of this, which is causing the error. You will want to use another arrow function again:

    }, () => {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log('File available at', downloadURL);
        this.setState({downloadURL})

      });

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined in react (firestore)

1 Answers1