Javascript Firebase上传功能每次的工作方式都不同

我有一个表单来上传一个新项目，它有几个字段和一个图像。 我构建该函数的方式是，它首先在Firestore中设置新文档，然后上载图像，然后重置表单

问题是它并不总是有效的。有时图像会被上传，有时即使表单被重置也不会被上传（重置是以图像上传为条件的）

这是不一致的，所以我不知道到底发生了什么

这是上传功能：

export const newItem = (values, image, setValues) => () => {
  const newDoc = db.collection("items").doc();

  newDoc.set({ ...values, id: newDoc.id }).then(() => {
    storageRef
      .child(`images/items/${newDoc.id}`)
      .put(image)
      .then(result => {
        console.log(result);
        setValues({});
      });
  });
}; 

我称之为：

newItem({ ...values, is_public }, imageObj, setValues);

export const newItem = (values, image, setValues) => () => {
  const newDoc = db.collection("items").doc();

  newDoc.set({ ...values, id: newDoc.id })
   .then(() => {
     return storageRef         //Here return the Promise returned by the put() method
      .child(`images/items/${newDoc.id}`)
      .put(image);
   })
   .then(snapshot => {   
       console.log(snapshot);
       setValues({});
   })
   .catch(e => {
      console.error(e.message); 
      //You should throw an error here, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
   });

};

然后我有一个云函数，它将新上传文件的url添加到新文档中（但我认为问题不在这里，因为当我说图像没有上传时，我的意思是我甚至在存储中都看不到它）：

编辑：

以下是我选择文件的方式：

  <input
    id="image"
    className="new-item__upload"
    type="file"
    onChange={handleImageChange}
  />

您需要按如下方式正确地执行Firebase异步操作（

set（）

和

put（）

）返回的承诺：

newItem({ ...values, is_public }, imageObj, setValues);

export const newItem = (values, image, setValues) => () => {
  const newDoc = db.collection("items").doc();

  newDoc.set({ ...values, id: newDoc.id })
   .then(() => {
     return storageRef         //Here return the Promise returned by the put() method
      .child(`images/items/${newDoc.id}`)
      .put(image);
   })
   .then(snapshot => {   
       console.log(snapshot);
       setValues({});
   })
   .catch(e => {
      console.error(e.message); 
      //You should throw an error here, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
   });

};

---

还建议在承诺链的末尾添加一个方法调用，以便在出现错误时获取更多详细信息。

您能否在

newItem

函数中，在承诺链的末尾添加一个方法调用，以便获取错误的更多详细信息。当上传不起作用时，你会得到什么？@RenaudTarnecI有，它只是不断刷新。我已经删除了

setValues

调用，到目前为止，它似乎一直在工作（尽管我还没有充分使用它来确定）。但我不明白。setValues只有在上传图像后才被调用，为什么会影响它呢？看看答案：您需要使用

then（）

方法正确链接异步操作返回的承诺。这不起作用，但当我删除

return

时，它起了作用。仍在检查它的稳定性，

图像

对象到底是什么？根据以下文档，它应该是一个有效的对象：它只是一个普通的jpeg。当它上传的时候，它上传的很好，我只是让它失败了。太不一致了。好吧，但错误是什么？我在上传文件时从未遇到过任何不一致的情况。你的互联网连接速度慢吗？