Tại sao bạn gặp lỗi này trong React (hoặc bất kỳ thứ gì khác) và cách khắc phục.

Bạn đang xem : lỗi cú pháp: mã thông báo không mong muốn i trong json ở vị trí 0

Từ chối chưa được xử lý (SyntaxError): Mã thông báo không mong muốn & lt; trong JSON ở vị trí 0

Bạn đã thực hiện một yêu cầu HTTP, có thể là với Tìm nạp và nó đã phát sinh lỗi này. Hoặc một cái tương tự.

Rất tiếc.

Dưới đây là nguyên nhân và cách khắc phục.

Đọc để biết gợi ý nhanh và xem video để biết hướng dẫn về một số kỹ thuật mà bạn có thể thử gỡ lỗi này trong ứng dụng của riêng mình.

Cách sửa lỗi Mã thông báo không mong muốn trong JSON

Nguyên nhân

Điều này xảy ra khi bạn đưa ra yêu cầu tới máy chủ và phân tích cú pháp phản hồi dưới dạng JSON, nhưng đó không phải là JSON. Mã chịu trách nhiệm có thể trông giống như sau:

  

tìm nạp

(

'/ người dùng'

)

.

sau đó

(

res

= & gt;

res

.

json

())

Yêu cầu thực tế hoạt động tốt. Nó đã nhận được phản hồi. Nhưng res.json () không thành công.

JSON.parse

Thay vào đó, bạn có thể tự phân tích cú pháp JSON bằng JSON.parse như thế này:

  

JSON

.

phân tích cú pháp

(

theStringThatIsNotJson

)

;

JSON.parse là điều mà res.json () của tìm nạp đang thực hiện, vì vậy lỗi sẽ giống nhau.

JSON hợp lệ

JSON phải bắt đầu bằng giá trị JSON hợp lệ – một đối tượng, mảng, chuỗi, số hoặc false / true / null . Phản hồi này bắt đầu bằng & lt; (do đó là “Mã thông báo không mong đợi & lt;”).

Mã thông báo không mong muốn đó, & lt; , là manh mối chắc chắn rằng phản hồi là HTML thay vì JSON.

Nguyên nhân cơ bản là do máy chủ trả về HTML hoặc một số chuỗi không phải JSON khác. Tại sao nó lại làm như vậy?

“Mã thông báo không mong đợi o trong JSON ở vị trí 1” và các loại khác

Văn bản chính xác của lỗi này sẽ khác nhau tùy thuộc vào những gì máy chủ trả về. Mã thông báo và vị trí có thể khác nhau, nhưng nguyên nhân gốc là giống nhau: văn bản mà ứng dụng của bạn đang cố gắng phân tích cú pháp thành JSON không thực sự là JSON hợp lệ.

Đây là một số biến thể khác mà tôi đã thấy…

  • Mã thông báo không mong đợi & lt; trong JSON ở vị trí 1
  • Mã thông báo p không mong đợi trong JSON ở vị trí 0
  • Mã thông báo không mong đợi d trong JSON ở vị trí 0

Xem video ở trên để biết lỗi này hoạt động như thế nào và cách sử dụng các công cụ dành cho nhà phát triển của trình duyệt của bạn để tìm ra chính xác nguyên nhân gây ra lỗi. (hoặc tiếp tục đọc)

Cách khắc phục

Điều đầu tiên cần làm là thử đăng xuất . Với tìm nạp, bạn có thể sử dụng res.text () thay vì res.json () để lấy chính chuỗi văn bản. Thay đổi mã của bạn để đọc nội dung như thế này và kiểm tra bảng điều khiển để xem điều gì đang gây ra sự cố:

  

tìm nạp

(

'/ người dùng'

)

// .then (res = & gt; res.json ()) // bình luận điều này ngay bây giờ

.

sau đó

(

res

= & gt;

res

.

văn bản

())

// chuyển đổi sang văn bản thuần túy

.

sau đó

(

văn bản

= & gt;

bảng điều khiển

.

nhật ký

(

văn bản < / p>

))

// sau đó đăng xuất

Lưu ý rằng các hàm res.json () res.text () này không đồng bộ, vì vậy bạn không thể ghi trực tiếp giá trị trả về của chúng. Đó là lý do tại sao console.log phải nằm trong một khối .then riêng biệt.

Sửa mã thông báo không mong muốn JSON.parse

Nếu bạn đang sử dụng trực tiếp JSON.parse thì đó là một cuộc gọi đồng bộ hoàn toàn cũ và bạn có thể thay thế cuộc gọi bằng console.log để xem điều gì đang diễn ra.

  

// JSON.parse (someString) // tạm thời nhận xét điều này

bảng điều khiển

.

nhật ký

(

someString

)

// đăng xuất và xem có vấn đề gì

Đổ lỗi cho Máy chủ?

Máy chủ có thể trả về HTML thay vì JSON vì nhiều lý do:

  • URL không tồn tại và máy chủ trả về trang 404 dưới dạng HTML. Bạn có thể mắc lỗi đánh máy trong mã máy khách ( / users thay vì / user ) hoặc trong mã máy chủ thiết lập tuyến.
  • Máy chủ có thể cần khởi động lại nếu bạn vừa thêm một URL vào đó. Ví dụ: nếu bạn đang sử dụng máy chủ Express và bạn vừa thêm một tuyến app.get ('/ users', ...) mới, nhưng không khởi động lại máy chủ, thì nó không Tôi chưa biết về tuyến đường mới.
  • Proxy của máy khách chưa được thiết lập : nếu bạn đang sử dụng máy chủ Webpack dev như Create React App, bạn có thể thiết lập proxy để chuyển tiếp các yêu cầu tới máy chủ phụ trợ < / span>.
  • URL gốc của API là / : Nếu bạn đang sử dụng proxy thông qua Webpack hoặc Create React App, hãy đảm bảo rằng tuyến API của bạn không ở cấp gốc < mã> / . Điều đó sẽ gây nhầm lẫn cho proxy và bạn sẽ nhận lại HTML thay vì yêu cầu API của mình. Thay vào đó, hãy đặt tiền tố tuyến đường bằng một cái gì đó như / api / .

Ngoài ra, hãy kiểm tra tab Mạng dành cho nhà phát triển của trình duyệt và tìm yêu cầu gây ra lỗi này, sau đó xem phản hồi được gửi lại.

Đó có phải là trang 404 không? (có thể thiếu tuyến đường hoặc lỗi đánh máy)

Nó có phải là trang index.html không? (có thể là một tuyến bị thiếu hoặc một proxy được định cấu hình sai)

Nếu mọi thứ đều ổn, hãy khởi động lại máy chủ phụ trợ và máy chủ nhà phát triển giao diện người dùng của bạn và xem sự cố có biến mất không.

Sự cố đã được Giải quyết?

Hy vọng rằng bây giờ bạn đã loại bỏ được lỗi. Nếu không, hãy để lại bình luận bên dưới với những gì bạn đã thử.

Thành công! Bây giờ hãy kiếm tra thư điện tử của bạn.

Muốn tôi gửi cho bạn một bảng lừa đảo để bạn không phải tìm kiếm trang này vào lần sau?

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại.

Địa chỉ email

Tôi tôn trọng sự riêng tư email của bạn. Hủy đăng ký bất kỳ lúc nào.

Trước khi chúng ta tiếp tục, tôi phải hỏi …

sự đồng ý

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại.

Thành công! Bây giờ hãy kiếm tra thư điện tử của bạn.

Tìm hiểu kiến ​​thức cơ bản về React trong 5 ngày

Cuối cùng, hãy hiểu cách hoạt động của React! Bạn sẽ:

🎉 Xem thứ gì đó trên màn hình

💄 Viết các thành phần động

🏃 Làm cho nó trở nên tương tác

😎 Tìm nạp dữ liệu thực

🛳 Đưa nó lên mạng

5 ngày, 5 email. Bắt đầu với những điều cơ bản và một kế hoạch!

Nhận Bài học 1 ngay bây giờ 👇

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại.

Địa chỉ email

Tôi tôn trọng sự riêng tư email của bạn. Hủy đăng ký bất kỳ lúc nào.

Trước khi chúng ta tiếp tục, tôi phải hỏi …

sự đồng ý

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại.

Học React có thể là một cuộc đấu tranh – rất nhiều thư viện và công cụ!
Lời khuyên của tôi? Bỏ qua tất cả chúng 🙂
Để biết cách tiếp cận từng bước, hãy xem hội thảo Pure React của tôi.

Nhà máy phản ứng thuần túy

Học cách suy nghĩ trong React

  • Hơn 90 bài học qua video trên màn hình
  • Bản ghi đầy đủ và phụ đề chi tiết
  • Tất cả mã từ các bài học
  • Phỏng vấn nhà phát triển


Bắt đầu học Pure React ngay bây giờ

Dave Ceddia’s Pure React là một tác phẩm có chiều sâu và rõ ràng. Bỏ mũ. Tôi là nhà đào tạo React ở London và muốn giới thiệu kỹ lưỡng điều này cho tất cả các nhà phát triển giao diện người dùng muốn nâng cao kỹ năng hoặc củng cố.

Alan Lavender

Alan Lavender

@ lavenderlens


Xem thêm những thông tin liên quan đến chủ đề lỗi cú pháp: mã thông báo không mong muốn i trong json ở vị trí 0

Bài 2.6: Gỡ lỗi (Debug) chương trình C trong Visual Studio Code

alt

  • Tác giả: Anh Nguyen Ngoc
  • Ngày đăng: 2021-09-28
  • Đánh giá: 4 ⭐ ( 6042 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhập môn lập trình với C playlist: https://www.youtube.com/playlist?list=PLn9lhDYvf_3FQbokWPQPV_Ik0iNabZJJm
    Nhóm thảo luận: https://www.facebook.com/groups/115838366528104
    Fan page: https://www.facebook.com/proit4all

    Lập_Trình_C_ProIT4All Lập_Trình_C_Slide_ProIT4All Lập_Trình_C COM108

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Cách dễ dàng sắp xếp lại các bài đăng trong WordPress (Từng bước) - sắp xếp lại các bài đăng trên blog wordpress

By DEVTEAM