Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@morry_48

[React]useStateで定義したstateを更新したのに再レンダーされない件(object / 配列)

More than 1 year has passed since last update.

少し詰まったので、書き記します。

newDataというstateを操作するfunction inputChange(e)を定義し、onChageイベントとして使ったが、再レンダーされず、入力値が変更できない。

js

    const [newData, setNewData] = useState({name:'', content:''});


    function inputChange(e){
        const key = e.target.name;
        const value = e.target.value;
        newData[key] = value;  // newDataの値を更新
        const data = newData  //setNewDataするため、dataを定義
        setNewData(data);
     }

コードは問題なさそうと思って悩んでいましたが、公式に答えがありました。

https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します。(React は Object.is による比較アルゴリズム を使用します)

↓これで行けました

js

    function inputChange(e){
        const key = e.target.name;
        const value = e.target.value;
        newData[key] = value;
        let data = Object.assign({}, newData);  //オブジェクトを新しく作り直す必要がある
        setNewData(data);
     }

配列の場合はsplice()を使用して、新しい配列として、dataを定義します。

[学び] React.jsは公式が大事

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
morry_48
PHPエンジニアです。
openlogi
物流はこれから、テクノロジーによりダイナミックに変化する業界です。物を作る人とそれを欲しい人、その間の物流や配送がすべてネットワーク化された、需要と供給が最適化される次世代のインフラづくりを私たちは目指しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?