未处理的拒绝（TypeError）：无法读取反应中未定义的属性“setState”（firestore）

Posted 2023-02-22

【中文标题】未处理的拒绝（TypeError）：无法读取反应中未定义的属性“setState”（firestore）

【英文标题】：Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined in react (firestore)

【发布时间】：2021-03-04 22:11:38

【问题描述】：

我正在开展一个项目，我正在通过来自不同用户的表单获取输入（文本和文件）并将其存储在云 Firestore 中。我已经成功地将来自不同用户的图像存储在 firebase 存储上，但现在我需要检索对应于不同用户的图像 url 并将其放在 firestore 数据库中。我可以在控制台上记录 url，但是当我尝试将它们添加到数据库时出现错误。我正在使用以下代码：

    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',

    );
  ;

【参考方案1】：

您在此处的代码中有三个对this.setState() 的调用。我将猜测错误消息指的是哪一个（尽管您应该在问题中指出这一点）。

这是您的文件上传完成回调：

    , 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)

      );

您在这里使用function 关键字，而不是像在其他地方那样使用箭头函数。这将改变导致错误的this 的含义。您将需要再次使用另一个箭头函数：

    , () => 
      // 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)

      );

另见：

How does the "this" keyword work?

【讨论】：

那没用，有没有其他方法可以将这些 url 发送到 firestore ？我真的必须使用状态吗？