reactでデバッグする方法をご教示願います。

Question

JSONデータをパースして画面に表示するプログラムを作成しています。

getリクエストが成功して以下のレスポンスを受けることに成功しましたが画面に
レンダリングすることができません。（ボタンを押下してもage、nameが表示されません。）

対応方法をご教示頂けないでしょうか？
さらにconsole.logを所々に入れていますが、VScode上に表示されません。
これはどこを見れば内容を確認できるのでしょうか？
また、VScode上でブレークポイントを置いて、ボタンを押下しても
実行結果を止めることができません。どのようにすればデバックができるのでしょうか？

以上３点をご教示頂けないでしょうか

{"body": "[{\"age\": \"25\", \"name\": \"tanaka\"}, {\"age\": \"33\", \"name\": \"yoshida\"}]"}

import React from "react";
import ReactDOM, { render } from "react-dom";
import axios from "axios";

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

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

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

  getProfile = async () => {
    this.country = "japan";
    try {
      const result = await axios.get(`https://***/${this.country}`
      );
      console.log(result);
      this.setState(result.data);
    } catch (error) {
      console.log("error!!");
    }
  };

  render() {
    console.log(this.state.body);
      return (
          <div>
              <button onClick={() => this.getProfile()}>Get Json</button>
              {this.memberList(this.state.body)}
          </div>
      );
  }
}
render(<App />, document.getElementById("root"));
export default App;

Answer 1

さらにconsole.logを所々に入れていますが、VScode上に表示されません。

VSCodeには表示されないと思います。
実際に画面を表示しているブラウザでF12を押すと開発者モードになり、そこのコンソールに諸々出力されていると思います。

どのようにすればデバックができるのでしょうか？

これについてはmaisumakun様と同じようにReact Developer Toolsをおすすめします。
他にも開発者用ツールはあるかと思いますが、知名度・機能的にもこれがベストかなと。

ボタンを押下してもage、nameが表示されません。

this.setStateを下記のようにすれば表示されるのではないでしょうか？

this.setState({body : result.data});

Comments

[pokemonta]

App.js:12 Uncaught TypeError: list.map is not a function
で怒られます。。。

[nekoniki]

失礼しました。result.data内に既に`body`プロパティは含まれていましたね。
では、setState時に
this.setState(JSON.parse(result.data))
とされるのはどうでしょう？

もしくは
{body.name} {body.age}
の箇所を
{body["name"]} {body["age"]}
に変えても動くかなと思います。

[pokemonta]

もうちょっとの気がしますが。。まだエラーでます

App.js:29 {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}config: {url: "https://XXXX", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}adapter: ƒ xhrAdapter(config)data: undefinedheaders: {Accept: "application/json, text/plain, */*"}maxBodyLength: -1maxContentLength: -1method: "get"timeout: Objectdata: {statusCode: 200, headers: {…}, body: "[{"age": "25", "name": "tanaka"}]"}headers: {content-length: "345", content-type: "application/json"}
App.js:34 error!!

[pokemonta]

this.setState(result.data);に戻したら
TypeError: list.map is not a functionが出ますので
JSONに変換するのは正解だとは思いますが。。。

[pokemonta]

this.setState(JSON.parse(result.data))　で構文エラーが起きているようです
SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at App.getProfile (App.js:31)

[nekoniki]

では
this.setState({body : JSON.parse(result.data.body)})
ではどうですか？

[pokemonta]

あ、いけました。何が原因だったのでしょうか？
Chromeのコンソール上には、以下のようにbody:が2回出力されていましたので
API側の問題と考えていました。
App.js:32 {statusCode: 200, headers: {…}, body: "[{"age": "25", "name": "tanaka"}]"}body: "[{"age": "25", "name": "tanaka"}, {"age": "33", "name": "yoshida"}]"

[pokemonta]

↓警告が出るみたいですがageかnameはユニークにしなてきなものかと思います
index.js:1 Warning: Each child in a list should have a unique "key" prop.

[nekoniki]

結果的にbodyをJSON.parseする必要があったわけですが、
{"body": "[{\"age\": \"25\", \"name\": \"tanaka\"}, {\"age\": \"33\", \"name\": \"yoshida\"}]"}
を丸ごと指定するとフォーマットがおかしいようです。
"[{\"age\": \"25\", \"name\": \"tanaka\"}, {\"age\": \"33\", \"name\": \"yoshida\"}]"
をフォーマットするのが正なので、先のコメントのようにしました。

警告ですが、ご認識の通りで、<li>を
<li key={"li_" + index}>
のようにすれば問題ないかと思います。

[pokemonta]

警告もなくなりました。
JSONフォーマット自体も問題ないと判断したいと思います。

お忙しいところ色々教えて頂きありがとうございました。

[pokemonta]

React Developer Toolsを使いこなせていないのが
全ての元凶だと思います
（ぜんぜんstateの値を確認できていません）

Answer 2

React Developer Tools（Chrome用、Firefox用）は試してみましたか？

コンポーネントごとにpropやstateの値を確認できます。

Comments

[pokemonta]

あ、そうゆうものがあるんですね。。試してみます。