回答編集履歴

テキスト追加

2020/06/03 11:48

投稿

スコア9058

answer CHANGED Viewed

@@ -14,4 +14,47 @@
   fetch('https://script.google.com/macros/s/*********/exec')
   .then(tasks => tasks.json())
   .then(json => json);
+```
+### 追記
+以下のように修正してみると、いかがでしょうか？
+#### 修正前
+```javascript
+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　を使います。
+#### 修正後
+```javascript
+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 });
+  }
+・・・
 ```