（React.js）mapを使用したデータの一覧表示

前提・実現したいこと

React.jsを使用して、タスク情報(DBテーブルの値)を表示するWebアプリを作っています。
サーバーサイドでAPIを作成済みで、Axiosを使用してデータを取得し、クライアント側でDBのレコードを一覧で表示したいのですが、
うまくいきません。

具体的には、render()内で以下のエラーがでています。
エラー内容：TypeError: Cannot read property 'map' of undefined

taskListに値が入っていないからだと思い、コンソール出力に確認した結果、
constructor内のAxios.Getによるデータの取得はうまくいってるように見えるのですが、
Axios.Getの後のConsoleを確認するとundefinedになっているという状態です。

この対処法がわからず悩んでおります。
JavascriptやReactに触れるのが初めてで理解が浅いところ恐縮なのですが、対処法を教えていただけないでしょうか。

よろしくお願いいたします。

javascript
1import './App.css';
2import React from 'react'
3import Axios from 'axios'
4import ReactDOM from 'react-dom';
5
6
7class TaskViewPage extends React.Component {
8  taskList;
9
10  constructor(props) {
11    super(props)
12    var getTaskUrl = 'ＡＰＩのＵＲＬ'
13    Axios.get(getTaskUrl, {
14    }
15    ).then((response) => {      
16      this.taskList = response.data;
17      //ここはテーブルから取得した値が表示される
18      console.log(response.data);
19      //ここはテーブルから取得した値が表示される
20      console.log(this.taskList);
21    })
22    //ここがundefinedになる
23    console.log(this.taskList);
24
25  }
26
27  render() {
28    return <div>
29      <div>
30        {this.taskList.map((val) => (
31          <div>
32            <label>
33              <input
34                type="checkbox"
35                className="checkbox-input"
36                defaultChecked={val.done}
37              />
38              <span className="checkbox-label">{val.task_name}</span>
39            </label>
40        ))}
41      </div>
42
43  }
44}
45export default TaskViewPage;

hoshi-takanori

2021/05/26 14:57

React 初めてとのことですが、まず state の扱いについて学ぶ必要があるかと思います。何か参考書とかお持ちでしょうか？

行動規範の内容に同意します

回答1件

おそらく、JSの非同期処理の話と、ReactのStateとライフサイクルの部分が理解できていないのかなと思います。
前者は調べたらいっぱい出てきます、後者については、公式のドキュメントを読んでみるといいかもしれません。

//ここがundefinedになる
    console.log(this.taskList);

まず、ここがundefinedになる原因ですが、おそらくこのconsole.logは上２つのconsole.logよりも前にコンソールに表示されるのではないでしょうか。
これはJSの非同期処理が原因で、axiosでデータを取得してくるのが時間がかかるので、それを待っている間にどんどん次の処理を実行してしまいます。
thenメソッド内に書かれた処理は、axiosの結果が返ってきてから実行されるので、console.logで値が確認できますが、thenメソッドの外にあるconsole.logは値が取得されるより先に実行されるのでundefinedになるわけです。

次に、render内のmapでエラーになる原因ですが、こちらも同様の理由で画面表示時にthis.taskListにundefinedが設定されているからです。
これを回避するためには、taskListを空の配列で初期化すれば大丈夫です。中身が空でも配列になっていればmapでtype errorになることはありません。

ただ、上２つをしても、一覧は表示されません。
それは、画面が描画（render）された後にaxiosでのデータ取得が完了するという順番になってしまうからです。
そのため、初期レンダリング→axiosでデータ取得の後に再度レンダリングをする必要があります。
このときに使うのがStateになります。
taskListをStateとして定義しておいて、axiosのthenメソッド内でsetState関数を使って値を更新すれば、そのタイミングで再レンダリングされ、画面にリストが表示されると思います。