[解決済み] await' はこの表現の型に影響を及ぼさない
2022-03-12 13:05:37
質問
この件について検索してみましたが、私が必要としているものに特化したものは見つかりませんでした。もしあれば、ここで教えてください。
私は、様々なコンポーネントで呼び出される汎用サービスを作成しようとしています。それは外部ソースからデータを要求する関数なので、私はそれを非同期関数として扱う必要があります。問題は、エディタがメッセージ "'await' has no effect on the type of this expression" を返してくることです。そして、まだデータがないため、アプリは確かにクラッシュします。
People.jsはサービスのrequests.jsを呼び出します。
import React, { useEffect, useState } from "react";
import requests from "../services/requests";
export default () => {
// State
const [ people, setPeople ] = useState({ count: null, next: null, previous: null, results: [] });
// Tarefas iniciais
useEffect(() => {
carregarpeople(1);
}, []);
// Carregando os dados da API
const carregarpeople = async (pageIndex) => {
const peopleResponse = await requests("people", pageIndex);
// This line below needs to be executed but it crashes the app since I need to populate it with the data from the function requests
// setPeople(peopleResponse);
}
return (
<div>
{
people.results.length > 0 ? (
<ul>
{
people.results.map(person => <li key = { person.name }>{ person.name }</li>)
}
</ul>
) : <div>Loading...</div>
}
</div>
)
}
そして、これはrequests.jsで、APIからjsonを返しているところです。
export default (type, id) => {
console.table([ type, id ]);
fetch(`https://swapi.co/api/${type}/?page=${id}`)
.then(response => response.json())
.then(json => {
console.log(json);
return json;
})}
解決方法は?
await
はプロミスと一緒に使う場合のみ有効ですが
requests
はプロミスを返しません。returnステートメントを全く持たないので、暗黙のうちに
undefined
.
プロミスを返すという意味だったようなので、returnを追加したコードがこちらです。
export default (type, id) => {
console.table([ type, id ]);
return fetch(`https://swapi.co/api/${type}/?page=${id}`)
.then(response => response.json())
.then(json => {
console.log(json);
return json;
})
}
p.s. もし、この操作を
async
/
await
というように表示されます。
export default async (type, id) => {
console.table([ type, id ]);
const response = await fetch(`https://swapi.co/api/${type}/?page=${id}`);
const json = await response.json();
console.log(json);
return json;
}
関連
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み】オブジェクトの型の名前を取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない