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

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

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

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

1回答

669閲覧

react 配列処理(filter)の返り値

退会済みユーザー

退会済みユーザー

総合スコア0

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/10/14 19:52

編集2020/10/14 20:00

onClickAgeの処理では引数の値ageとstateのageGroupsに保存されている値を比べて同じ物があればstateのageGroupsの配列からそれを消して、違うなら新しくageGroupsの配列に追加したいです。
filterAgeの処理で同じ値を比べて違うなら引数のageを返したいのですがstate(st)の値が返ってしまいます。
わかる方いましたらご教授して欲しいです

const onClickAge = (age: IAgeGroups) => { const filterAge = state.searchState.ageGroups.filter((st) => { if (st.code != age.code) return age; }); if (state.searchState.ageGroups === null) { setState({ ...state, searchState: { ...state.searchState, ageGroups: [...state.searchState.ageGroups, age] }, }); } if (filterAge.length > 0) { setState({ ...state, searchState: { ...state.searchState, ageGroups: filterAge }, }); } else { setState({ ...state, searchState: { ...state.searchState, ageGroups: [...state.searchState.ageGroups, age] }, }); } };

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

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

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

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

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

guest

回答1

0

ベストアンサー

typescript

1const filterAge = state.searchState.ageGroups.filter((st) => { 2 if (st.code != age.code) return age; 3});

filterAgeの処理で同じ値を比べて違うなら引数のageを返したいのですがstate(st)の値が返ってしまいます。
わかる方いましたらご教授して欲しいです

まずfilterのコールバック関数はbooleanを返すべきです。

いずれにせよこの書き方だとfilterAgeには「ageGroupsからagecodeが一致しない要素の配列」が入ってしまうのでそれが原因だと思います。

onClickAgeの処理では引数の値ageとstateのageGroupsに保存されている値を比べて同じ物があればstateのageGroupsの配列からそれを消して、違うなら新しくageGroupsの配列に追加したいです。

これをやりたいのならfilterを使わずにfind等でageageGroupsに含まれているかどうかを確認して、なければ追加、あれば削除をすればよいと思います。

typescript

1const onClickAge = (age: IAgeGroups) => { 2 let newAgeGroups = [...state.searchState.ageGroups]; 3 const target = newAgeGroups.find((st) => { 4 return st.code === age.code; 5 }); 6 7 if(target){ 8 newAgeGroups.splice(newAgeGroups.indexOf(target),1); 9 } 10 else { 11 newAgeGroups.push(target); 12 } 13 setState({ 14 ...state, 15 searchState: { ...state.searchState, ageGroups: newAgeGroups }, 16 }); 17}

投稿2020/10/14 23:26

nekoniki

総合スコア2411

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

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

退会済みユーザー

退会済みユーザー

2020/10/15 07:19

ありがとうございます!! ageGroupsは初期値が以下のようになっていて最初はstateに値が何も入っていない状態なので 処理が呼ばれるとTypeError: Cannot read property 'code' of undefinedになってしまいます const inishialAgeGroups: IAgeGroups = { code: '', name: '', };
退会済みユーザー

退会済みユーザー

2020/10/15 07:19

if(target){ newAgeGroups.splice(newAgeGroups.indexOf(target),1); } 上記の処理は何をしているのでしょうか?
退会済みユーザー

退会済みユーザー

2020/10/15 08:05

undefinedが配列の中に入ってしまいます。
退会済みユーザー

退会済みユーザー

2020/10/15 08:07

const target = newAgeGroups.find((st) => { return st.code === age.code; }); console.log(target); 上記の中身をみたらundifenidとなっていました。 なぜなのでしょうか?
nekoniki

2020/10/15 08:09

> ageGroupsは初期値が以下のようになっていて最初はstateに値が何も入っていない状態 定義を拝見したところ配列ではないように見受けられます、ageGroupsはIAgeGroups型ということで合っていますか? > 上記の処理は何をしているのでしょうか? targetが存在する(=既にnewAgeGroupsにageが含まれる)場合はnewAgeGroupsから除外する処理です。 質問文中の「ageGroupsの配列からそれを消して」にあたる処理です。 > undefinedが配列の中に入ってしまいます。 どの配列にでしょうか?
nekoniki

2020/10/15 08:10

> 上記の中身をみたらundifenidとなっていました。 > なぜなのでしょうか? その時点でのnewAgeGroupsとageの値をご提示いただきたいです。
退会済みユーザー

退会済みユーザー

2020/10/15 14:10 編集

newAgeGroups.splice(newAgeGroups.indexOf(target),1);のところがよくわかりません。 indexOfに入れるのはnumber だと思うのですがなぜtargetを入れて成り立つのでしょう?
退会済みユーザー

退会済みユーザー

2020/10/20 03:40

返信遅れてすいません。 ありがとうございました! とても勉強になりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問