リアクト - ネイティブは「POST」要求投げ「でSyntaxError：JSON入力の予期しない終了」を取得アンドロイド

Question

で、これは私の機能
は、どこに問題

fetchData() { 
     fetch(REQUEST_URL, { 
     method: 'POST', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
     Request : 'menu', 
     active : '1', 
     }) 
    }).then((response) => response.json()) 
    .then((responseData) => { 
     this.setState({ 
       menu: responseData.Response, 
      }); 
    }) 
    .catch((error) => { 
     console.warn('error',error); 
    }) 
    .done(); 
     } 

が指摘してくださいされるかわからないです関数の問題

Answer 1

このエラーの原因は、サーバーが有効なJSON（404ページなどのJSONをまったく使用していない可能性があります）を返さないことです。あなたがAPIをフェッチ使用した場合の2xxと等しくないステータスコードで

Answer 2

then((response) => response.json()) 
        ^^^^^^^^^^^^^ I think this is the problem 

応答はしたがって、あなたは、このようなHTMLページやプレーンテキストストリームとして何かをJSON.parseも、catchにはなりません。

レスポンスをJSONとして解析する前に、response.ok === trueかどうかを確認する必要があります。

Answer 3

リクエストのContent-Typeをapplication/jsonに設定すると、CORSをチェックするプリフライトリクエストが送信される可能性があります。

私のリアクションアプリ（リアクションネイティブではない）では、クロスドメインの問題が発生しました。私のサーバーは、プリフライトリクエストをサポートしていないため、応答は次のようになります。

response.json()私はクローム開発ツールで期待されるJSONレスポンスを得たにもかかわらず、失敗の原因となっている

{ body: null, status: 0, ok: false, }

。

私の場合は、コンテンツタイプをapplication/x-www-form-urlencodedに変更しました。これはプリフライトリクエストを必要としません。それは期待どおりに動作します。

あなたのケースでは役に立たないかもしれませんが、洞察力があることを願っています。

Answer 4

ログresponseData。 APIが無効なデータを返す可能性があります。

Answer 5

レスポンスをJSON形式にキャストできないため、エラーが発生します。この問題は、間違ったヘッダー、応答本文、またはサーバーに基づくその他のさまざまな理由により発生する可能性があります。明らかにレスポンスが一貫していないので、レスポンスをJSONにキャストしようとする前に、サーバーレスポンスの追加検証を実行することです。あなたは置き換えることで、これを行うことができ

：

.then((response) => response.json()) 

いずれか

.then((response) => { 
    // In this case, we check the content-type of the response 
    if (response.headers.get('content-type').match(/application\/json/)) { 
    return response.json(); 
    } 
    return response; 
    // You can also try "return response.text();" 
})