Reactjs - メソッドは、API呼び出しがデータを取得する前に結果を返します。 （常に空のオブジェクト）

Question

私の簡素化のコードでは：

static getData(Id) { 
    const data = []; 
    api.getData(lId) 
    .then((Res) => { 
     data.push(Res); 
    }); 
    return data; 
} 

APIエンドポイントは、データを取得しますが、それはいくつかの時間がかかります。メソッドは常に[]を返しますが、console.log（Res）を置くとデータはそこにあります。メソッドが最初のconst data = [];を返し、APIがデータを返すまで待機しないことを意味します。

この問題を解決するにはどうすればよいですか？

Regrds

Answer 1

あなたのタイミングの問題はここにあります：

static getData(Id) { 
    const data = []; 
    api.getData(lId) 
    .then((Res) => { 
     data.push(Res); 
    }); 
    return data; <-- Gets returned before the promise resolves/rejects 
} 

あなたは余分な処理を行う必要がある場合あなたのデータを呼び出し元に返す前に - あなたの例では、配列に入れています - あなたは別の約束でそれを包む必要があります：

static getData(Id) { 
    return new Promise((resolve, reject) => { 
     api 
     .getData(Id) 
     .then((Res) => { 
      const data = [] 
      data.push(Res); 
      resolve(data) 
     }) 
     .catch(reject) 
    }) 
} 

Answer 2

あなたはPromiseを使用する必要があります。

例えば：

static getData(Id) { 
    return new Promise((resolve) => { 
    api.getData(Id) 
     .then((Res) => { 
     resolve(Res); 
     }); 
    }); 
} 

そして、このように、このメソッドを使用します。

getData(15) 
    .then((data) => { 
    console.log(data); 
    });