Reactにて、プルダウンを連動させる方法が分からずどなかたご教授いただけますでしょうか。

フロントエンドは初心者です。

今までバックエンドは触っていましたが、今度はフロントエンド(React JSX)を触ることになり、
余り時間的猶予もないため、アドバイスいただければ幸いです。

プルダウンで選択した内容を別のプルダウンに連動させたい

多次元JSONを取得し、stateに値を補完
プルダウンAに、１階層目を表示
プルダウンAの値を選択したら、プルダウンBに２階層目の値を展開

該当のソースコード

JSONデータ例

const result = {
  "result" : true,
  "message": "",
  "code": 200,
  "total_cnt" : 1,
  "all_count": 2,
  "data" :{
      "prefecture_list" : [
       {
         "prefecture_id" : "1",
         "prefecture_name" : "北海道"
         "city_list" [
            {
              "city_id" : "1",
              "city_name" : "札幌"
            },
            {
              "city_id" : "2",
              "city_name" : "函館"
            }
         ]
       },  
       {
         "prefecture_id" : "2",
         "prefecture_name" : "青森"
         "city_list" [
            {
              "city_id" : "1",
              "city_name" : "青森"
            },
            {
              "city_id" : "2",
              "city_name" : "三沢"
            }
         ]
       }
     ]
  }
}

constructor(props) {
    super(props);
    this.state = {
       prefecture_list: [],
       prefeture_selected: 0,
       city_list: [],
       city_selected: 0
   }
}

getPrefectureList = async () => {
 this.setState({prefectures: result.data.prefecture});

  const prefectures = this.state.prefecture.map((line) => {
    return {
      prefecuture_id: line.prefecuter_id,
      prefecuture_name: line.prefecture_name
    }
  });
  this.setState({result.data.prefecture_list: prefectures})
}

handleChangePrefecture = (value) => {
  this.setState({prefecture_selected: value});

  const selectedPrefecture = this.state.prefecuture_list.filter(line=> {
    if (line.prefecture_id === this.state.prefecture_selected + 1) {
      return line;
    }
  });

  // ** 市町村データ取得
  const citys = selectedPrefecture.map((line) => {
    return line.city_list;
  }
  
  this.setState({city_list: citys[0]);
}

this.setState({prefecture_list: result.data,prifecture_list})

プルダウンAに都道府県名を展開

render () {

const handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
}

<Select>
    name="prifecture_selected"
    id="prefecture_selected"
    value={this.state.prefecture_selected}
    onChange={(e) => this.handleChangePrefecture(e.target.value)}
    <MenuItem value={""}>&nbsp;</MenuItem>
    {this.state.prefecture_list.map(line => {
        return (
            <MenuItem
                value={line.prefecture_id}
                key={line.prefecture_id}
            >
            {line.prefecture_name}
           </MenueItem>
        )
    })}
</Select>
<Select>
<Select>
    name="city_selected"
    id="city_selected"
    value={this.state.city_selected}
    onChange={(e) => 
       this.setState({
           [e.target.name]: e.target.value
         })
    })
    <MenuItem value={""}>&nbsp;</MenuItem>
    {this.state.city_list.map(line => {
        return (
            <MenuItem
                value={line.city_id}
                key={line.city_id}
            >
            {line.city_name}
           </MenueItem>
        )
    })}
</Select>
</Select>
}

補足情報

そもそももっと勉強してから質問をと言う意見もあるかと思いますが、
効率よくプルダウンBへの連動はどう書けばいいのかアドバイスいただければ幸いです。

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

回答1件

ベストアンサー

余り時間的猶予もないため、

なるほどです。時間的猶予がないのですね。そういうときは論より証拠といいますか、動くコードをご提示したほうがいいかなと思ったのでざっくり作ってみました。

こちらです 👉 https://codesandbox.io/s/j1cj16w9e6o77u-9t0fhs

ご参考になれば幸いです。

投稿2022/10/15 00:31

退会済みユーザー

総合スコア0

prr4e

2022/10/15 07:30

御親切にありがとうございます。いただいたソースを基に自信のプログラムに反映させていただきます。 ※うまく動いたら再度ご連絡させていただきます。

prr4e

2022/10/16 07:00

教えていただいた内容と違いますが、対応できました。 getPrefectureListメソッドにて、都道府県のリストをJSONより取得して展開。 handleChangePrefectureメソッドでは、都道府県を選択したら、prefecture_listより選択値の都道府県を取得し、市区町村のデータを抽出しました。もっと楽な書き方があるとは思いますが、以下困っているところです。 if (line.prefecture_id === this.state.prefecture_selected + 1) { valueには選択値の数字が入ってくるのですが、 setStateしたパラメータを見ると、1を選択したはずが0になっていたので、プラス1しています。 ※そもそもやり方が違うのでしょうか。また、市区町村リストを取得するのに、filterやmapを何回かに分けて取得していますが、 1回で取得したいとは思いつつ、デバックした際にundefinedになったので、一旦断念しました。

退会済みユーザー

2022/10/16 10:58

> 教えていただいた内容と違いますが、対応できました。とのことで良かったです 👏 この後、お作りになったReactのコードについて、teratailでさらなる改善案を求めたり > デバックした際にundefinedになったので、一旦断念しました。といったような未解決の点について理由や解決方法を質問したりする場合には現状のコードを codesandbox https://codesandbox.io/ や codepen https://codepen.io/ に作ったものをコピペして動くようにしたものを質問とともに提示するか、あるいは（これらにコピペして再現するのもそれなりに手間なので、）手元の作業ディレクトリを gitレポジトリにして GitHub にプッシュし、レポジトリのurl を質問に載せて、回答者がそのレポジトリを (fork して、） git clone、 yarn install、yarn start すると動かせる状況にしておいて質問すると解決に直結する回答が得られやすいと思います。質問する際に毎回そこまでやる必要はないですが、具体的なコード修正案が欲しい場合そのようにすると有益な回答が得られやすいと思われます。また質問用のデモを作るときにダミーのAPIを作れる mockable https://www.mockable.io/ （私の回答にある試作品もこれを使いました）や、作る手間をかけることなく用意されているダミーAPIを使える JSON Placeholder https://jsonplaceholder.typicode.com/ なども便利です。（逆に、問題意識を持っている箇所だけのコードの断片だけを載せて質問しても、回答者は他の部分を推測するしかないので、回答が得られても問題解決に直結するものではないものになってしまう場合もままあるかと思います。）

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