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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

2918閲覧

Reactでstateに辞書型を設定したい場合についてです。

Hayato1201

総合スコア220

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

1クリップ

投稿2018/10/23 13:48

以下の様にstateに辞書型を追加したいです。

JS

1this.state = { 2 3 list:{ 4 "hoge":[], 5 "huga":[] 6 7 } 8 9 }

今この様に"hoge"や"huga"というキーを入力していますが、これらの値は以下の様にenumから取得できます。

JS

1const TypeList = KeyEnum.getEnums() 2 3const types = TypeList.map( data => { 4 return ( data.key ) 5 })

この様にするとtypeは["hoge","huga"]の様にキーを取得できます。ここで取得した値をキーとした辞書をstateで設定したいです。その様な場合どうすれば良いでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2018/10/23 15:13

こんにちは。ご質問の要点は、 typesという変数に ["hoge","huga"] という配列が入っているときに、 { hoge: [], huga: [] } というオブジェクトを作るにはどうしたらいいか、ということでよいでしょうか?
Hayato1201

2018/10/24 00:26

そういう事です!
jun68ykt

2018/10/24 01:35

なるほどです。そのような主旨で回答しましたので、ご覧下さい。
guest

回答1

0

ベストアンサー

こんにちは。

質問への追記・修正の依頼のほうで、

jun68ykt 2018/10/24 00:13

こんにちは。ご質問の要点は、 typesという変数に ["hoge","huga"] という配列が入っているときに、 { hoge: [], huga: [] } というオブジェクトを作るにはどうしたらいいか、ということでよいでしょうか?

 

Hayato1201 2018/10/24 09:26
そういう事です!

とのご回答を頂きましたので、上記の主旨で、以下のコードにて回答します。

javascript

1 2const types = ['hoge', 'huga', 'piyo']; 3 4const list = types.reduce( 5 (o, type) => { 6 o[type] = []; 7 return o; 8}, {}); 9

上記を実行すると、 list には hoge, huga, piyo をプロパティとして持ち、それぞれの値が空配列であるようなオブジェクトが入ります。

以下は動作確認のためのサンプルです。

参考になれば幸いです。

補足

Object.fromEntries() という新しいメソッドがあり、この回答を書いている時点においては、 FireFox 63 でのみサポートされているようですが、これを使うと以下のように書けます。

javascript

1const types = ['hoge', 'huga', 'piyo']; 2 3const list = Object.fromEntries(types.map(type => [type, []]));

以下は上記を使ったサンプルです。

上記を Mac版 FireFox 63.0 で開いたところ、意図どおりの結果が得られました。他のブラウザでは未確認です。

投稿2018/10/24 01:30

編集2018/10/24 03:02
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hayato1201

2018/10/24 11:31

丁寧なご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問