Trong thành phần ứng dụng React xử lý các nguồn cấp nội dung giống như Facebook, tôi gặp phải một lỗi:
Feed.js: 94 "trình phân tích cú pháp" không xác định "Cú pháp: Mã thông báo bất ngờ <trong JSON ở vị trí 0
Tôi đã gặp một lỗi tương tự hóa ra là lỗi chính tả trong HTML trong chức năng kết xuất, nhưng dường như đó không phải là trường hợp ở đây.
Khó hiểu hơn, tôi đã chuyển mã trở lại phiên bản cũ hơn, đã biết và tôi vẫn gặp lỗi.
Feed.js:
import React from 'react';
var ThreadForm = React.createClass({
getInitialState: function () {
return {author: '',
text: '',
included: '',
victim: ''
}
},
handleAuthorChange: function (e) {
this.setState({author: e.target.value})
},
handleTextChange: function (e) {
this.setState({text: e.target.value})
},
handleIncludedChange: function (e) {
this.setState({included: e.target.value})
},
handleVictimChange: function (e) {
this.setState({victim: e.target.value})
},
handleSubmit: function (e) {
e.preventDefault()
var author = this.state.author.trim()
var text = this.state.text.trim()
var included = this.state.included.trim()
var victim = this.state.victim.trim()
if (!text || !author || !included || !victim) {
return
}
this.props.onThreadSubmit({author: author,
text: text,
included: included,
victim: victim
})
this.setState({author: '',
text: '',
included: '',
victim: ''
})
},
render: function () {
return (
<form className="threadForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange} />
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange} />
<input
type="text"
placeholder="Name your victim"
value={this.state.victim}
onChange={this.handleVictimChange} />
<input
type="text"
placeholder="Who can see?"
value={this.state.included}
onChange={this.handleIncludedChange} />
<input type="submit" value="Post" />
</form>
)
}
})
var ThreadsBox = React.createClass({
loadThreadsFromServer: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
handleThreadSubmit: function (thread) {
var threads = this.state.data
var newThreads = threads.concat([thread])
this.setState({data: newThreads})
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: thread,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: threads})
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
getInitialState: function () {
return {data: []}
},
componentDidMount: function () {
this.loadThreadsFromServer()
setInterval(this.loadThreadsFromServer, this.props.pollInterval)
},
render: function () {
return (
<div className="threadsBox">
<h1>Feed</h1>
<div>
<ThreadForm onThreadSubmit={this.handleThreadSubmit} />
</div>
</div>
)
}
})
module.exports = ThreadsBoxTrong các công cụ dành cho nhà phát triển Chrome, lỗi dường như xuất phát từ chức năng này:
loadThreadsFromServer: function loadThreadsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},với dòng console.error(this.props.url, status, err.toString()gạch chân.
Vì có vẻ như lỗi này có liên quan đến việc lấy dữ liệu JSON từ máy chủ, tôi đã thử bắt đầu từ một db trống, nhưng lỗi vẫn còn. Lỗi dường như được gọi trong một vòng lặp vô hạn có lẽ là do React liên tục cố gắng kết nối với máy chủ và cuối cùng làm hỏng trình duyệt.
BIÊN TẬP:
Tôi đã kiểm tra phản hồi của máy chủ với các công cụ phát triển Chrome và ứng dụng khách Chrome REST và dữ liệu có vẻ là JSON thích hợp.
EDIT 2:
Có vẻ như mặc dù điểm cuối API dự định thực sự trả về dữ liệu và định dạng JSON chính xác, React đang bỏ phiếu http://localhost:3000/?_=1463499798727thay vì dự kiến http://localhost:3001/api/threads.
Tôi đang chạy một máy chủ tải lại webpack trên cổng 3000 với ứng dụng express chạy trên cổng 3001 để trả về dữ liệu phụ trợ. Điều gây nản lòng ở đây là điều này đã hoạt động chính xác trong lần cuối cùng tôi làm việc với nó và không thể tìm thấy những gì tôi có thể đã thay đổi để phá vỡ nó.
JSON.parse("<foo>")- một chuỗi JSON (mà bạn mong đợi dataType: 'json') không thể bắt đầu bằng <.
NODE_ENV. Xem điều này: github.com/facebookincubator/create-react-app/blob/master/ mẹo