web-dev-qa-db-ja.com

React Js：Uncaught（promise）SyntaxError：Unexpected token <JSON in position 0

React jsでJsonファイルを取得したいので、これにはfetchを使用しています。しかし、それはエラーを示しています

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

エラーの可能性がある、私は手がかりを得ていません。 JSONも検証しました。

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`)
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

My Json（fr.json）

{
  "greeting1": "(fr)choose an emoticon",
  "addPhoto1": "(fr)add photo",
  "close1": "(fr)close"
}
javascriptjsonajaxreactjs
19
iamsaksham

Content-Typeと等しくなるように、2つのヘッダーapplication/jsonおよびAcceptを追加します。

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`, {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

    })
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}
30
Abdennour TOUMI

私のために働いた解決策は次のとおりです：-私はsrcからpublicディレクトリにdata.jsonファイルを移動しました。次に、フェッチAPIを使用してファイルをフェッチしました。

fetch('./data.json').then(response => {
          console.log(response);
          return response.json();
        }).then(data => {
          // Work with JSON data here
          console.log(data);
        }).catch(err => {
          // Do something for an error here
          console.log("Error Reading data " + err);
        });

問題は、reactアプリをコンパイルした後、フェッチ要求がURL " http：// localhost：3000/data.json "でファイルを検索することでした。これは実際には私のreactアプリのパブリックディレクトリです。ただし、残念ながら、react appのコンパイル中にdata.jsonファイルはsrcからパブリックディレクトリに移動されません。したがって、data.jsonファイルをsrcからパブリックディレクトリに明示的に移動する必要があります。

5
Akash Kumar Seth

API（消費している）が対応するJSONを送信していないときに発生する場合があります。 404ページまたはHTML/XML応答のようなものとして応答が発生する場合があります。

0
Ashraf Zaman

このエラーは発生する可能性がありますが、実際の問題の原因となる可能性があることに注意してください。私の場合、エラー状態としてJSONに問題はありませんでしたが、1位で処理するJSONデータを取得できないという404エラーが発生し、このエラーが発生しました。

これに対する修正は、ローカルプロジェクトの.jsonファイルでfetchを使用するために、.jsonファイルにアクセスできる必要があることでした。これは、プロジェクトのルートにあるpublicフォルダーなどのフォルダーに配置することで実行できます。 jsonファイルをそのフォルダーに移動すると、404が200に変わり、Unexpected token < in JSON at position 0エラーが解決されました。

0
atconway

私は同じエラーを受け取っていました、私にとっては、APIが文字列を返しているだけでしたが、フェッチ呼び出しではjsonを期待していました：

_response => response.json()
_

APIからjsonを返すことで問題が解決しました。APIがjsonを返さないことになっている場合、単純にresponse.json()を実行しないでください

0
Siddharth Sachdeva