89853


以下のuseStateのsetpopulationCompositionObjでpopulationCompositionObjが更新できずに困っています。  
解決のためのアドバイスを頂けましたら幸いです。

#### 開発環境

・Reactのバージョン：React18  
・OS：Windows10  
・エディタ：VSCode  
・ブラウザ：Chrome（バージョン: 103.0.5060.66（Official Build） （64 ビット））  
・API：RESAS-API - 地域経済分析システム  
<https://opendata.resas-portal.go.jp/>

### 試したこと

  * if-else文両条件文内でsetpopulationCompositionObjによるpopulationCompositionObjの更新。 意図：useStateはフックの呼びだされる順番が変わってしまうため、条件文の中で更新できないという記事情報があったが、if文とelse文のどちらのパスでもuseStateを更新すればフックの呼び出し順番が変わらないか？と思い、試行。

### ソースコード

CheckBox.jsx

[code]

    import React, { useState } from "react";
    const CheckBox = (props) => {
      const [populationCompositionObj, setpopulationCompositionObj] = useState({});
      const handleChange = (event) => {
        if (event.target.checked === true) {
          const path =
            "https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?cityCode=-&prefCode=" +
            (props.eachResult && props.eachResult.prefCode);
          fetch(path, {
            headers: { "x-api-key": "省略" },
          })
            .then((res) => res.json())
            .then((data) => {
              setpopulationCompositionObj(data); // populationCompositionObjが更新できない
            });
        } else {
          setpopulationCompositionObj(null); // populationCompositionObjが更新できない
        }
        console.log(populationCompositionObj);
      };
      return (
        <div>
          <label>{props.eachResult && props.eachResult.prefName}</label>
          <input type="checkbox" onChange={handleChange}></input>
        </div>
      );
    };
    export default CheckBox;
    
[/code]

App.jsx

[code]

    import React, { useState, useEffect } from "react";
    import { Fragment } from "react";
    import CheckBox from "./components/CheckBox";
    export const App = () => {
      const [prefecturesObj, setPrefecturesObj] = useState([]);
      useEffect(() => {
        fetch("https://opendata.resas-portal.go.jp/api/v1/prefectures", {
          headers: { "x-api-key": "NJgaOz1cA7SlWcx91WGP2DgUTJ8T7AQ3SIImDCBg" },
        })
          .then((res) => res.json())
          .then((data) => {
            setPrefecturesObj(data);
          });
      }, []);
      return (
        <Fragment>
          {prefecturesObj.result &&
            prefecturesObj.result.map(function (eachResult, i) {
              return <CheckBox key={i} eachResult={eachResult}></CheckBox>;
            })}
        </Fragment>
      );
    };
    
[/code]


CC BY-SA 4.0
2022-07-09T04:44:00.717
89851
2022-07-09T05:10:39.163
21034
question
reactjs
ReactでuseStateが更新できない


自己解決しました。  
handleChange関数とreturnの間でconsole.logを見たらpopulationCompositionObjが更新されてました。  
Reactにおいて、useStateが更新されるのは関数の処理が終了した後という記事がありましたので、その知識がなかったため、ハマっていました。


CC BY-SA 4.0
2022-07-09T05:10:39.163
89853
2022-07-09T05:10:39.163
21034
89851
answer