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

Question

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] },
      });
    }
  };

Answer 1

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

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

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

• MDN | filter()

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

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

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

const onClickAge = (age: IAgeGroups) => {
  let newAgeGroups = [...state.searchState.ageGroups];
  const target = newAgeGroups.find((st) => {
    return st.code === age.code;
  });

  if(target){
    newAgeGroups.splice(newAgeGroups.indexOf(target),1);
  }
  else {
    newAgeGroups.push(target);
  }
  setState({
    ...state,
    searchState: { ...state.searchState, ageGroups: newAgeGroups },
  });
}

Comments

[退会済みユーザー]

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

[退会済みユーザー]

if(target){
newAgeGroups.splice(newAgeGroups.indexOf(target),1);
}
上記の処理は何をしているのでしょうか？

[退会済みユーザー]

undefinedが配列の中に入ってしまいます。

[退会済みユーザー]

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

[nekoniki]

> ageGroupsは初期値が以下のようになっていて最初はstateに値が何も入っていない状態
定義を拝見したところ配列ではないように見受けられます、ageGroupsはIAgeGroups型ということで合っていますか？

> 上記の処理は何をしているのでしょうか？
targetが存在する(=既にnewAgeGroupsにageが含まれる)場合はnewAgeGroupsから除外する処理です。
質問文中の「ageGroupsの配列からそれを消して」にあたる処理です。

> undefinedが配列の中に入ってしまいます。
どの配列にでしょうか？

[nekoniki]

> 上記の中身をみたらundifenidとなっていました。
> なぜなのでしょうか？

その時点でのnewAgeGroupsとageの値をご提示いただきたいです。

[退会済みユーザー]

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

[nekoniki]

> indexOfに入れるのはnumber だと思うのですがなぜtargetを入れて成り立つのでしょう？
それはどこの情報を参照されたのでしょうか？
indexOfに渡されるのは配列内で探索したい内容そのものです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

[退会済みユーザー]

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