"Синтаксис ошибка: непредвиденная лексема
в компоненте приложения React, который обрабатывает каналы контента, подобные Facebook, я сталкиваюсь с ошибкой:
кормить.js: 94 неопределенный" parsererror "" SyntaxError: неожиданный токен
я столкнулся с аналогичной ошибкой, которая оказалась опечаткой в HTML в функции рендеринга, но это, похоже, не так.
более запутанно, я откатил код обратно к более ранней, известной рабочей версии, и я все еще получаю ошибку.
кормить.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 = ThreadsBox
в инструментах разработчика Chrome ошибка, похоже, исходит из этой функции:
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)
});
},
С console.error(this.props.url, status, err.toString() подчеркнуты.
поскольку похоже, что ошибка имеет какое-то отношение к извлечению данных JSON с сервера, я попытался начать с пустой БД, но ошибка сохраняется. Ошибка, по-видимому, вызывается в бесконечном цикле предположительно, поскольку React непрерывно пытается подключиться к сервер и в конечном итоге сбой браузера.
EDIT:
Я проверил ответ сервера с помощью инструментов Chrome dev и клиента Chrome REST, и данные кажутся правильными JSON.
EDIT 2:
похоже, что хотя предполагаемая конечная точка API действительно возвращает правильные данные и формат JSON, React опрашивает http://localhost:3000/?_=1463499798727 вместо ожидаемого http://localhost:3001/api/threads.
я запускаю сервер горячей перезагрузки webpack на порту 3000 с помощью express приложение работает на порту 3001 вернуть данные. Что здесь расстраивает, так это то, что это работало правильно в последний раз, когда я работал над ним, и не могу найти то, что я мог бы изменить, чтобы сломать его.
20 ответов:
текст сообщения об ошибке соответствует тому, что вы получаете от Google Chrome при запуске
JSON.parse('<...'). Я знаю, что вы сказали, что сервер устанавливаетContent-Type:application/json, но я вынужден поверить в ответ тело на самом деле HTML.
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"С
console.error(this.props.url, status, err.toString())подчеркнуты.The
errбыл фактически брошен вjQuery, и передается вам как переменнаяerr. Причина, по которой строка подчеркнута: просто потому, что именно там вы регистрируете его.Я бы предложил вам добавить в свой журнал. Глядя на фактический
xhr(XMLHttpRequest) свойства, чтобы узнать больше об ответе. Попробуйте добавитьconsole.warn(xhr.responseText)и вы, скорее всего, увидите HTML, который был получен.
вы получаете HTML (или XML) обратно с сервера, но
dataType: jsonговорит jQuery для разбора как JSON. Проверьте вкладку "Сеть" в Chrome dev tools, чтобы увидеть содержимое ответа сервера.
это оказалось проблемой разрешений для меня. Я пытался получить доступ к url-адресу, для которого у меня не было авторизации с помощью cancan, поэтому url-адрес был переключен на
users/sign_in. перенаправленный url-адрес отвечает на html, а не на json. Первый символ в ответе html-это<.
Я испытал эту ошибку "SyntaxError: неожиданный токен m в JSON в позиции", где токен 'm' может быть любым другим символом.
оказалось, что я пропустил одну из двойных кавычек в объекте JSON, когда я использовал RESTconsole для теста DB, как {"name: "math"}, правильный должен быть {"name": "math"}
Мне потребовалось много усилий, чтобы понять эту неуклюжую ошибку. Я боюсь, что другие столкнутся с подобными обломками.
в моем случае ошибка была результатом того, что я не присвоил возвращаемое значение переменной. Следующее сообщение об ошибке:
return new JavaScriptSerializer().Serialize("hello");Я изменил его на:
string H = "hello"; return new JavaScriptSerializer().Serialize(H);без переменной JSON невозможно правильно отформатировать данные.
в моем случае я получал этот запущенный веб-пакет, и это оказалось каким-то повреждением где-то в локальном каталоге node_modules.
rm -rf node_modules npm install...было достаточно, чтобы заставить его работать правильно еще раз.
моя проблема была в том, что я получаю данные обратно в
stringкоторый не был в правильном формате JSON,который я тогда пытался разобрать.simple example: JSON.parse('{hello there}')выдаст ошибку в h. в моем случае url обратного вызова возвращал ненужный символ перед объектами:employee_names([{"name":....и получал ошибку при e в 0. Мой обратный URL-адрес сам по себе имел проблему, которая при исправлении возвращала только объекты.
эта ошибка возникает при определении ответа как
application/jsonи вы получаете HTML в качестве ответа. В принципе, это произошло, когда вы пишете сценарий на стороне сервера для определенного url с ответом JSON, но формат ошибки находится в HTML.
в моем случае, за размещенные в Azure угловой участок 2/4, мой вызов API, чтобы мой_сайт/АПИ/... было перенаправление из-за проблем маршрутизации mySite. Таким образом, он возвращал HTML с перенаправленной страницы вместо api JSON. Я добавил исключение в интернете.конфигурационный файл для пути api.
Я не получаю эту ошибку при разработке локально, потому что сайт и API были на разных портах. Вероятно, есть лучший способ сделать это ... но это сработало.
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <clear /> <!-- ignore static files --> <rule name="AngularJS Conditions" stopProcessing="true"> <match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" /> <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> <action type="None" /> </rule> <!--remaining all other url's point to index.html file --> <rule name="AngularJS Wildcard" enabled="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> <action type="Rewrite" url="index.html" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
Это может быть старый. Но, это просто произошло в angular, тип контента для запроса и ответа были разными в моем коде. Итак, проверьте заголовки для,
let headers = new Headers({ 'Content-Type': 'application/json', **Accept**: 'application/json' });в React axios
axios({ method:'get', url:'http:// ', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, responseType:'json' })jQuery Ajax:
$.ajax({ url: this.props.url, dataType: 'json', **headers: { 'Content-Type': 'application/json', Accept: 'application/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) }); },
у меня было такое же сообщение об ошибке после учебник. Наша проблема, кажется, " url: this.реквизит.URL-адрес в AJAX-вызов. В Ответ.DOM когда вы создаете свой элемент, мой выглядит так.
ReactDOM.render( <CommentBox data="/api/comments" pollInterval={2000}/>, document.getElementById('content') );Ну, в этом поле комментариев нет url-адреса в реквизитах, только данные. Когда я переключился
url: this.props.url->url: this.props.data, он сделал правильный вызов на сервер, и я вернулся ожидаемые данные.Я надеюсь, что это помогает.
проведя много времени с этим, я узнал, что в моем случае проблема заключалась в том, что на моем пакете была определена "Домашняя страница".файл json сделал мое приложение не работает на firebase (та же ошибка "токен"). Я создал свое приложение react с помощью create-react-app, затем я использовал руководство firebase на READ.me файл для развертывания на страницах github, понял, что мне нужно было сделать дополнительную работу для работы маршрутизатора, и переключился на firebase. руководство github добавило ключ домашней страницы на пакет.json и вызвал развертывание вопрос.
Protip: тестирование json на локальном узле.сервер JS? Убедитесь, что у вас еще нет что-то маршрутизации к этому пути
'/:url(app|assets|stuff|etc)';
на общем уровне эта ошибка возникает, когда анализируется объект JSON, в котором есть синтаксические ошибки. Думать о чем-то подобном, где свойство message содержит экранированные двойные кавычки:
{ "data": [{ "code": "1", "message": "This message has "unescaped" quotes, which is a JSON syntax error." }] }если у вас есть JSON в вашем приложении где-то это хорошо, чтобы запустить его через JSONLint чтобы убедиться, что он не имеет синтаксической ошибки. Обычно это не так, хотя по моему опыту, обычно JSON возвращается из API, который является виновный.
когда запрос XHR сделан к HTTP API, который возвращает ответ с
Content-Type:application/json; charset=UTF-8заголовок, который содержит недопустимый JSON в теле ответа вы увидите эту ошибку.если серверный контроллер API неправильно обрабатывает синтаксическую ошибку, и он распечатывается как часть ответа, это нарушит структуру возвращаемого JSON. Хорошим примером этого может быть ответ API, содержащий предупреждение PHP или уведомление в ответе тело:
<b>Notice</b>: Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br /> { "success": false, "data": [{ ... }] }95% времени это источник проблемы для меня, и хотя это несколько рассматривается здесь в других ответах, я не чувствовал, что это было четко описано. Надеюсь, это поможет, если вы ищете удобный способ отследить, какой ответ API содержит синтаксическую ошибку JSON, которую я написал угловой модуль для этого.
вот модуль:
/** * Track Incomplete XHR Requests * * Extend httpInterceptor to track XHR completions and keep a queue * of our HTTP requests in order to find if any are incomplete or * never finish, usually this is the source of the issue if it's * XHR related */ angular.module( "xhrErrorTracking", [ 'ng', 'ngResource' ] ) .factory( 'xhrErrorTracking', [ '$q', function( $q ) { var currentResponse = false; return { response: function( response ) { currentResponse = response; return response || $q.when( response ); }, responseError: function( rejection ) { var requestDesc = currentResponse.config.method + ' ' + currentResponse.config.url; if ( currentResponse.config.params ) requestDesc += ' ' + JSON.stringify( currentResponse.config.params ); console.warn( 'JSON Errors Found in XHR Response: ' + requestDesc, currentResponse ); return $q.reject( rejection ); } }; } ] ) .config( [ '$httpProvider', function( $httpProvider ) { $httpProvider.interceptors.push( 'xhrErrorTracking' ); } ] );более подробную информацию можно найти в статье блога, на которую ссылается выше, I не опубликовал все, что нашел здесь, поскольку это, вероятно, не все уместно.
для меня это произошло, когда одно из свойств объекта, которое я возвращал, как JSON бросил исключение.
public Dictionary<string, int> Clients { get; set; } public int CRCount { get { var count = 0; //throws when Clients is null foreach (var c in Clients) { count += c.Value; } return count; } }добавив нулевую проверку, исправил ее для меня:
public Dictionary<string, int> Clients { get; set; } public int CRCount { get { var count = 0; if (Clients != null) { foreach (var c in Clients) { count += c.Value; } } return count; } }
просто что-то основное, чтобы проверить, убедитесь, что у вас нет ничего закомментированного в файле json
//comments here will not be parsed and throw error
просто чтобы добавить к ответам, это также происходит, когда ваш ответ API включает
<?php{username: 'Some'}что может быть случай, когда ваш сервер с помощью PHP.
в python вы можете использовать json.Дамп (str) перед отправкой результата в html шаблон. с помощью этой командной строки преобразуйте в правильный формат json и отправьте в шаблон html. После отправки этого результата в JSON.разбор (результат), это правильный ответ, и вы можете использовать это.
для некоторых, это может помочь вам ребята: У меня был аналогичный опыт работы с Wordpress REST API. Я даже использовал почтальона, чтобы проверить, есть ли у меня правильные маршруты или конечная точка. Позже я узнал, что я случайно поставил " эхо " внутри моего скрипта-крючки:
таким образом, в основном это означает, что я напечатал значение, которое не является JSON, которое смешивается со скриптом, который вызывает ошибку AJAX - "SyntaxError: неожиданный токен r в JSON в позиции 0"
Comments