web-dev-qa-db-ja.com

Immutable.jsでネストされた値を取得する

こちらのドキュメントによると: https://facebook.github.io/immutable-js/docs/#/Map/getIn

keyPath引数に配列を提供することにより、深くネストされた値を取得できるはずです。これは私がやったことですが、戻り値としてundefinedを取得しています。

http://jsfiddle.net/srxv4mwu/

var obj = Immutable.Map({categories: {1: 'a', 2: 'b'}});
var output = obj.getIn(['categories', 1]);
alert(output);

私は何を間違えていますか?

29
xiankai

マップは、単に値を持つキーのコレクションです。持っているのは、キーcategoriesと値_{1: 'a', 2: 'b'}_を持つマップです。別のマップ内に配置したからといって、値が自動的に不変マップになるわけではありません。

現在、getIn()関数は、他のImmutable.jsマップのみを「参照」します。そこにあるのは、通常のol 'javascriptオブジェクトです。 _1_値を取得するだけの場合は、次のようにします。

_var obj = Immutable.Map({categories: {1: 'a', 2: 'b'}});
var output = obj.getIn(["categories"])[1];
alert(output);_
_<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>_

categoriesコレクションもマップにする場合は、明示的に定義する必要があります。また、Amitが指摘したように、getIn()関数で文字列を使用する必要があります。

_var obj = Immutable.Map({
        categories: Immutable.Map({
                1: 'a',
                2: 'b'
        })
});
var output = obj.getIn(['categories', '1']);
alert(output);_
_<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>_

上記のコードは_'a'_を返します。

多くのネストされたマップがある場合は、おそらく次のようなことを行う方が便利でしょう。

_var obj = Immutable.fromJS({
        categories: {
                1: 'a',
                2: 'b'
        }
});
var output = obj.getIn(['categories', '1']);
alert(output);_
_<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>_

fromJs()関数は、ネストされたオブジェクトをマップまたはリストに自動的に変換します。

54
user1440308

コードには2つの問題があります。

  1. Immutable.Map(...)はパラメーターを走査して複雑な不変を作成しません。そのためにはImmutable.fromJS(...)が必要です。
  2. それを行ったら、getIn(...)で文字列を使用する必要があるので、['categories', '1'] の代わりに ['categories', 1]

working fiddle を参照してください。

18
Amit