質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • React.js

    913questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

React : Stateに連想配列を入れた場合の更新は差分でしょうか?

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 585

Statham

score 61

掲題の通りです。
以下のように、componentのstateに、buttonsというstateに連想配列形式のデータを入れることを想定します。
この時、例えばthis.state.buttons["現在地"]can_clickを、あるアクションを受けた場合falseに変えるなどのfunctionを入れた場合、それが起きたら<RadioCircleButtons buttons={buttons} />の更新は

  1. 差分(this.state.buttons["現在地"].can_clickのみの更新)
  2. すべて('this.state.buttons'を全て更新)

のどちらでしょうか?

import React from 'react';
import RadioCircleButtons from '../utils/RadioCircleButtons';

class DrillButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      is_shown: '',
      buttons: { "現在地": { name: "現在地", can_click: true, is_selected: false }, "駅名": { name: "駅名", can_click: true, is_selected: false } },
    };
  }

  render() {
    const buttons = this.state.buttons
    return (
      <div>
        <RadioCircleButtons buttons={buttons} />
      </div>
    );
  }
}

export default DrillButtons;

よろしくお願いします。

==== 追記 ====
本質問と少し話がズレますが、
ネストしたcomponentを書き換えるには、全てを複製する必要がある??

this.setState({
      buttons: { "現在地": { name: "現在地", can_click: false, is_selected: false }, "駅名": { name: "駅名", can_click: true, is_selected: false } },
    };
});


https://teratail.com/questions/116344

=== さらに追記 ===
https://stackoverflow.com/questions/43040721/how-to-update-a-nested-state-in-react
ネストしたstateの書き換えについては理解しました。

依然として、ネストしたstateの更新が差分なのかはわかっていないので、ご教授いただきたいです。
追記が多くわかりづらくなってしまいましたが、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

「更新」が、何に対するものかが、掴みきれなかったのですが、
Stateに対するもの、と仮定すると。

setStateに渡すオブジェクトは、現在のStateを利用して、毎回フルスクラッチから全オブジェクトを作成する。

というイメージが近い気がします。

ということで、回答としては、2番なのですが、
実際にやることは、現在のStateに、変更した分を反映して、新しいStateオブジェクトを作る。
なので、1番と言えなくもありません。

Reactの内部実装を確認したわけではありませんが、
内部で管理しているStateと、setStateで渡されたオブジェクトを比較して、
変化があった部分に関連するDOMを更新する。というイメージだと理解しています。

このイメージで考えれば、setStateに渡すオブジェクトは、どうなっていなければならないか、
認識しやすくなるように思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/26 09:08

    og24715 さんの回答をみて、気になり、ソースをのぞいてみましたが、
    私の回答は、誤りのようなので、後ほど訂正します。

    まだ、冒頭部分を読み始めただけですので、詳細は把握していませんが、
    説明コメントには、setStateに渡すのは、partialStateとありますので、
    変更したいものだけでも良さそうです。
    以下、一部抜粋です。

    * Sets a subset of the state. Always use this to mutate
    * state. You should treat `this.state` as immutable.

    Component.prototype.setState = function(partialState, callback) {

    いい加減な回答で、大変失礼しました。
    まずは、誤った回答だったという報告だけ。

    キャンセル

0

setState() より更新された state は、過去の state となんら関係ありません。
当然差分も存在しませんし、そんなことは書き手が考えることではありません。
setState() により state が更新されたらそのコンポーネントの render() が走るだけです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • React.js

    913questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。