使用 React.js 問題獲取本地 JSON object，錯誤：意外的令牌 < 在 JSON 在 Z46057FE076FD4982A

Question

所以我想從我的本地 data.js 文件中獲取。 它看起來像這樣：

{
  product_name: [
  {'name': 'hello',
   'lastName': 'hello'
   }, {'name': 'hi',
   'lastName': 'hi'}
]
}

這是有效的 JSON 嗎？ 我正在獲取它的代碼如下所示：

fetch('./data.json')
        .then(res=> res.json())
        .then(text=> console.log(text))
 

在此之后，我的 console.log 中出現錯誤。 另外，當我 go 到網絡選項卡並單擊 data.json 它告訴我需要啟用 javascript 時，這是什么意思？ 感謝你們

Answer 1

我也許能夠解決你的答案。

第一件事

如果您當前正在開發程序，您必須記住格式化 JSON 以便用戶可以讀取它。 在生產模式下，您可以跳過此步驟，但這是一個很好的做法。

接下來，您擁有的 JSON 似乎沒有使用引號作為鍵。 這是 JSON 必須的。 如果您不喜歡引號，請使用 JSON 的友好兄弟json5 。

下一個，

這解釋了 JSON 和fetch 。

Fetch API 在 promise 中返回響應 stream。 響應 stream 不是 JSON，因此嘗試調用 JSON.parse 將失敗。 要正確解析 JSON 響應，您需要使用 response.json function。 這將返回 promise，因此您可以繼續該鏈。

我看到你已經做到了，但是忘記了上面帖子中提到的GET方法。 並且，使用return關鍵字將 JSON 傳遞給下一個 promise。 因此，您更正的 JS 代碼將是：

fetch('./data.json', { method: "GET" })
        .then(res => return res.json())
        .then(text => console.log(text))

我不是 React 方面的專家，但這些是我可以糾正的一些常見問題。

問題的第二部分

我真的不知道為什么它說 JavaScript 需要啟用。 也許 go 到您的設置並啟用 JavaScript？ 或者，如果您使用廣告攔截器，請嘗試禁用它一次並查看。

最后的話

我想我已經解決了你的部分問題。 如果這對您有所幫助，我將非常高興。 謝謝！