web-dev-qa-db-ja.com

typescriptは、react-nativeを使用してフェッチAPIにヘッダーを追加できません

反応ネイティブからFetch APIを使用しており、TypeScriptを使用しています。私のコードは次のようになります：

let responseLogin = await fetch('http://url_example', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: requestBody
    });

しかし、ヘッダーがある場所で次のエラーが発生します。

 Argument of type '{ method: string; headers: { 'Content-Type': string; }; body: string; }' is not assignable to parameter of type 'RequestInit'.
  Types of property 'headers' are incompatible.
    Type '{ 'Content-Type': string; }' is not assignable to type 'Headers | string[][]'.
      Object literal may only specify known properties, and ''Content-Type'' does not exist in type 'Headers | string[][]'.

また、カスタムヘッダーを作成しようとしましたが、うまくいきませんでした。

    let requestHeaders = new Headers();
        requestHeaders.set('Content-Type', 'application/json');
        // I have also tried adding this at the end but no luck 
        // requestHeaders.get('Content-Type');

これにヘッダーを追加するにはどうすればよいですか？これを実現する方法が見つからず、何が問題なのかわかりません。これらを郵便配達員でテストすると、200応答が返され、ここでは401応答が返されます。私はまた、カスタムヘッダーを追加するためにこのライブラリを試しました： https://www.npmjs.com/package/fetch-headers

使用：Visual Studio code 1.81.1 "react-native"： "0.50.0"、 "TypeScript"： "2.6.1"

jsontypescriptreact-nativefetch-api
11
P.Lorand

私はこのような問題を解決しました：

let requestHeaders: any = { 'Content-Type': 'application/json' };
let responseLogin = await fetch('URL', {
  method: 'POST',
  headers: requestHeaders,
  body: requestBody
});

JSが構文を正しく解釈し、TypeScriptのみが解釈しないため、このエラーメッセージを無視するだけで済み、2つの文字列を格納する変数を作成することでそれを行いました。

2
P.Lorand

ビルドにどのTypeScriptライブラリを含めていますか？ headersプロパティの定義が間違っているようです。 TypeScript 2.6.2では、headersプロパティはタイプHeadersInitであり、次のように定義されます：type HeadersInit = Headers | string[][] | { [key: string]: string };

5
A. Goodale

HeadersInitと入力してみてください。

const requestHeaders: HeadersInit = new Headers();
requestHeaders.set('Content-Type', 'application/json');

const responseLogin = await fetch('URL', {
  method: 'POST',
  headers: requestHeaders,
  body: requestBody
});

そうでない場合、Headers（）コンストラクターで開始したときに発生するエラーを表示できますか？

5
Peter van Leeuwen

このようにインポートの問題を解決しました

import fetch、{Headers} from 'node-fetch';

0
Camilo Andres Perez Sanchez