APIから読み込んだJSONをReactのStateにセットしたい

Question

###実現したいこと
APIを読み込み、ReactのStateにセットしたい

const getTasksApi = () => {
  //APIを読み込む処理
  //何種類か試しました。試したものは下に書いてあります。
}

class App extends React.component {
  constructor() {
 　　this.state = {
       tasks: getTaskApi();
    }
}

###試したこと

• fetchを使ってAPIを読み込む => getTaskApiでreturnできない

const getTasksApi = () => {
  fetch('https://script.google.com/macros/s/*********/exec')
  .then(tasks => tasks.json())
  .then(json => json);
}

• XMLHttpRequestを使う => 読み込みよりも先にreturnされて、undefindになってしまう

const getTaskApi = () => {
  let tasks;
  const request = new XMLHttpRequest();
  request.open('GET', 'https://script.google.com/macros/s/*********/exec', true);
  request.responseType = 'json';
  request.onload = function () {
    tasks = this.response;
  };
  request.send();
  return tasks
}

###環境
node: v12.16.1
create-react-app: 3.4.1

MacOS, VSCode, Firefox Developer Edition

Answer 1

こんにちは。fetch を使った方のコードで、修正前の

const getTasksApi = () => {
  fetch('https://script.google.com/macros/s/*********/exec')
  .then(tasks => tasks.json())
  .then(json => json);
}

だと、関数 getTasksApi 自体は、何も返していないので意図通りになっていないものと思います。ですので、 => の後の { と最後の } を削除して、以下のようにするといかがでしょうか？

修正後

const getTasksApi = () => 
  fetch('https://script.google.com/macros/s/*********/exec')
  .then(tasks => tasks.json())
  .then(json => json);

追記

以下のように修正してみると、いかがでしょうか？

修正前

const getTasksApi = () => {
  //APIを読み込む処理
  //何種類か試しました。試したものは下に書いてあります。
}

class App extends React.component {
  constructor() {
 　　this.state = {
       tasks: getTaskApi();
    }
  }

App の constructor() では、 this.state.tasks を空の配列で初期化しておいて、componentDidMount() でAPIを呼び、その結果で this.setState で tasks を更新します。このとき、レスポンスが返ってくるために待つために、 async と await　を使います。

修正後

const getTasksApi = async () => 
  fetch('https://script.google.com/macros/s/*********/exec')
  .then(tasks => tasks.json());

class App extends React.component {
  constructor() {
 　　this.state = {
       tasks: []
    }
  }

  componentDidMount() {
    const tasks = await getTasksApi();
    this.setState({ tasks });
  }

・・・

Comments

[ryuto.nakamura]

早速の回答ありがとうございます。
試したところ、想定通りには動きませんでした。
コンソールに表示してみると、` Promise { <state>: "pending" } `がリターンされているようです。

[jun68ykt]

コメントありがとうございます。
回答に書いた修正は、getTasksApi を、とりあえず何か返すようにしただけの修正でした。

さらに、App からこれを呼んで、this.state に結果を入れるための修正を追記しましたので、参考にして頂ければと思います。手元で動かして確認したわけではないので、すべての問題が解決されて、意図通り動くかは分かりませんが、何らか進展があると思います。

[jun68ykt]

補足です。

追記したコードは、APIのレスポンス全体が配列である想定のものになっていますので、レスポンス全体としてはオブジェクトで、その中の何らかのプロパティとして配列があるのであれば、修正が必要と思われます。

[ryuto.nakamura]

追記ありがとうございます。

指定いただいたコードを実行してみたところ、"await"は"async"の中でしか使えないという旨のエラーが出ました。 awaitを削ってみるとstateにgetTasksApi()の結果は入ったようですが、getTaskApi()の返り値
が相変わらずPromise{<state>: "pending"}のままです。

>補足　APIは配列です。

何度も質問ばかりで、お手数をかけてすみません。よろしくお願いします。

[jun68ykt]

大丈夫ですよー????

> "await"は"async"の中でしか使えないという旨のエラー
の件、たしかにそうですね。ちょっと見落としていました。なので、以下のように、componentDidMount の前にも async を付けると、どうでしょう？

修正前
componentDidMount()

修正後
async componentDidMount()

[ryuto.nakamura]

返信ありがとうございます。
asyncをつけた上で、

.then(json => {
tasks = json
});
return tasks;

をgetTasksApi()に追加したところ、期待通りに動きました。
ありがとうございました。

[jun68ykt]

どういたしまして。
> 期待通りに動きました。
とのことでよかったです????