reactの処理順を教えていただけないでしょうか

Question

import React from "react";
import { render } from "react-dom";

import axios from "axios";

class App extends React.Component {
  constructor() {
    super();
    this.state = { member: [] };
  }

  memberList(list) {
    const memberList = list.map((member, index) => {
      return (
        <li>
          {member.name} {member.age}
        </li>
      );
    });

    return <ul>{memberList}</ul>;
  }

  render() {
    console.log(this.state.member);
    return (
      <div>
        <button onClick={this.getJson}>Get Json</button>
        {this.memberList(this.state.member)}
      </div>
    );
  }

  getJson = () => {
    const url = "https://api.myjson.com/bins/159wqn";

    axios.get(url).then(res => {
      this.setState(res.data);
    });
  };
}

render(<App />, document.getElementById("root"));

上記コードにおいて、getJson()で取得したレスポンスをsetStateに格納しているところまでは何となく理解しましたが
どのようにして描画しているか理解できません。

私の見解を記載しますので認識があっているか教えて頂けないでしょうか
・constructorのstate にmember配列を格納する。初期値はカラ。
・onClickでgetJson（）実行
・レスポンスをStateに格納。
↑setStateしたらmember配列に自動で格納されるのでしょうか？？？
・memberListが実行されテーブルに描画される？
↑なぜlist.map((member, index) をしないといけないのでしょうか？？

このあたりの構文はどこで勉強すればよいのでしょうか？

Answer 1

>>・レスポンスをStateに格納。
>>↑setStateしたらmember配列に自動で格納されるのでしょうか？？？
されないと思います
setState({ member: res.data })
のように代入先を明示する必要があります
バージョンによってはそういった動作もしたのかもしれませんがわかりません

>>↑なぜlist.map((member, index) をしないといけないのでしょうか？？
memberの中身はオブジェクトなので、そのまま

<div>{member}</div>

としてしまうと表示できません
mapを使ってループさせ、中身を取り出す必要があります。
質問文のコードでは、

      <div>
        <button onClick={this.getJson}>Get Json</button>
        **{this.memberList(this.state.member)}**
      </div>

となっているので、
関数memberList()の返り値をそのまま描画している事になります。
memberList()の中身ですが、

  memberList(list) {
    const memberList = list.map((member, index) => {
      return (
        <li>
          {member.name} {member.age}
        </li>
      );
    });
    return <ul>{memberList}</ul>;
  }

ループの結果をconstでmemberListへ代入しているようです
変数memberListの中身は

        <li>
          tanaka 40
        </li>
        <li>
          yamada 20
        </li>
        <li>
          yoshida 20
        </li>

みたいな感じです

この変数memberListが、関数memberList()の最後にある、

return <ul>{memberList}</ul>;

で扱われていて、
結局関数memberList()の返り値は

<ul>
    <li>
      tanaka 40
    </li>
    <li>
      yamada 20
    </li>
    <li>
      yoshida 20
    </li>
</ul>

という事になります。

mapの引数についてですが、
memberが当該ループで扱っているデータを格納してある変数
(上のリンクで言えば、{name: 'tanaka', age: '40'}　みたいな中身になってます。
なので、member.nameで　tanaka という文字列を取得できます。)
indexが、現在のループが何回目なのか、もしくはmemberの何個目を扱っているのかが格納されている変数です。
コード上では参照されていないので、書かなくても動くと思います。

Comments

[pokemonta]

ご解説ありがとうございました。
自分で実装するとなると複雑なのでどこから手を付けたらよいのか？
(描画する部分から実装するのかなど。memberListも描画部ですが
ロジックも含まれるので後回しにしよ。みたいな判断も必要になる？)
また、どのように実装すればよいのか
イメージできません。
(なぜmap使おうという発想になるのか。
さらにsetStateなどの組み込み関数の使い方も調べていくことになる？？)
諸々の思考方法、調査方法はどのように身に着けていければよいのでしょうか？

[web_inago]

何がしたいのか
(何かを作りたいのか、それともまだ明確に作りたいものがなくて、基礎として学んでいるのか)
現状どの程度の理解なのか
(生のjsの経験、reactの経験、他言語の経験)
を具体的に教えていただければ、
自分も大した経験があるわけではないですが、参考程度のアドバイスはできるかもれません

[pokemonta]

すみません。react初めてですので
何から手を付けたらよいのかわかっていません。
昔、phpを1か月だけやったことあります。
あとjavaやpythonの書籍は読んだことあります。書いたことは皆無ですが。。。
reactを使って基礎的なアプリをつくりたいです。
todoアプリが一般的な例として上がっていますが、
書いてある内容をいまいち理解できませんでした。構文や
なぜその部分にjumpしているのかなど
ある程度知ってる前提で書かれていて解説が薄いです
jsの経験もあまりありません。ただonclikイベントなんかは理解できます。
アプローチの仕方やわからなかった時の調べ方なんかを参考にさせてもらいたいです。

[web_inago]

jsの基礎を学んでから、reactのチュートリアルに着手するのが一般的だと思います。
reactはjsのライブラリなので、いきなりreactから学ぶのはあまりお勧めしません。

jsの基礎に関しては、自分の話になってしまいますが、
Progateという学習サービスあります。
もちろん学習サービスなので解説も丁寧ですし、
カリキュラムの中に実行環境があるので、ハンズオンで進めることができるのでお勧めですね。
何より無料ですし、有料プランも月980円ぐらいだったと思います。
reactのカリキュラムもあります。

progateでjsとreactをざっくりで良いので理解したら、react公式のチュートリアルが良いと思います。

todoアプリを実装するということになると、データを保持する(DBなど)必要もあるので、
localStorageでやってみたり、laravelやrailsでAPIを作って連携したりすることになります。
laravelやrailsも確かprogateにカリキュラムがあります。
どちらも公式チュートリアルがあるので、かなりボリューミーですがオススメです。

[pokemonta]

なるほど、手始めにjsですね。ありがとうございました。