1. ホーム
  2. javascript

[解決済み] 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;
}