firebasePOSTurl400錯誤請求

我正在嘗試使用一種非常簡單的方法從我的 reactjs 應用程式向 firebase 實時資料庫發布請求。這是一個進入我的資料庫的螢屏截圖。這里 blogs 下的第一個條目是用戶的 UID，該用戶可以創建多個博客，例如螢屏截圖中的 id b1。

這是我的 POST 請求代碼：

const id = localStorage.getItem('uid')
 const postData = async () => {
        var num = localStorage.getItem('blogNumber')
        const resp = await fetch(
            'https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs.json',
            {
             method: 'POST',
             body: {
                id: {
                    num : {
                        title: titleRef.current.value,
                        description: contentRef.current.value,
                        createdAt: new Date(),
                        isPosted: false
                    }
                }
            },
            headers: {
                'Content-Type': 'application/json'
            }
            });
            const data = await resp.json()
           localStorage.setItem('blogNumber', localStorage.getItem('blogNumber')  1)
    }

嘗試點擊此網址時收到 400 個錯誤請求

但根據這個頁面，這似乎是我正在點擊的正確網址

https://retool.com/blog/your-guide-to-crud-in-firebase-realtimedb-with-rest-api/

uj5u.com熱心網友回復：

這里有很多問題：

• 您沒有在此處使用idor的值num，您需要將它們括在方括號中
• API 呼叫的body屬性fetch應該通過JSON.stringify.
• 您不應在請求正文中發布 Date 物件。將其轉換為字串、將其轉換為純數字、使用時間戳物件或使用服務器值占位符。
• 您的代碼始終假定帖子已成功創建。fetchAPI 不會因錯誤的狀態代碼而引發錯誤。您應該檢查狀態代碼以確定您想要做什么。由于 Firebase 資料庫操作通常以 JSON 回應，因此我在檢查代碼之前將此處的主體決議為 JSON，但是您可能應該先檢查空主體。
• 每次寫入資料時，使用POST /blogs.json都會覆寫整個樹。/blogs您應該更改路徑或使用帶有適當正文的 PATCH 請求。

const id = localStorage.getItem('uid')
const postData = async () => {
  const num = localStorage.getItem('blogNumber')
  const reqData = {
    [id]: { // <-- use square brackets for value as key
      [num]: { // <-- use square brackets for value as key
        title: titleRef.current.value,
        description: contentRef.current.value,
        createdAt: Date.now(), // <-- returns milliseconds since epoch
        isPosted: false
      }
    }
  }

  const resp = await fetch(
    'https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs.json',
    {
      method: 'POST',
      body: JSON.stringify(reqData), // you need to stringify this yourself
      headers: {
        'Content-Type': 'application/json'
      }
    }
  );

  
  const data = await resp.json();

  if (!resp.ok) { // fetch API does not throw errors by itself
    const err = new Error('Unexpected status: '   resp.status);
    err.data = data;
    err.resp = resp;
    throw err;
  }

  localStorage.setItem('blogNumber', localStorage.getItem('blogNumber') 1)
}

更新為使用更深的路徑：

const id = localStorage.getItem('uid')
const postData = async () => {
  const num = localStorage.getItem('blogNumber')
  const reqData = {
    title: titleRef.current.value,
    description: contentRef.current.value,
    createdAt: Date.now(), // <-- returns milliseconds since epoch
    isPosted: false
  }

  const resp = await fetch(
    `https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs/${uid}/${num}.json`,
    {
      method: 'POST',
      body: JSON.stringify(reqData), // you need to stringify this yourself
      headers: {
        'Content-Type': 'application/json'
      }
    }
  );
  
  const data = await resp.json();

  if (!resp.ok) { // fetch API does not throw errors by itself
    const err = new Error('Unexpected status: '   resp.status);
    err.data = data;
    err.response = resp;
    throw err;
  }

  localStorage.setItem('blogNumber', localStorage.getItem('blogNumber') 1)
}

標籤：反应 火力基地 邮政 firebase-实时数据库 粗鲁

上一篇：無法登錄，因為它顯示來自firebase的錯誤訊息“電子郵件ID格式錯誤”

下一篇：從Firestore獲取數值的問題