react 複雑な条件分岐

Question

下記の構文はどういうことをしているのでしょうか？
groupsをmapで一つ一つ回して state.selectGroupの中からgroupsのIdと同じのがあればnull を返しなければgを返す。
その後にその値をselectGroupに入れているということでしょうか？

  const addGroups = (groups:　Groups[]) => {
    const newGroups = groups.map((g) => {
      const Groups =
        state.selectGroups.find((selectGroup) => selectGroup.id === g.id);
      return Groups ? null : g;
    }).filter(Boolean);
    setState({
      ...state,
      selectGroups: [...state.selectedGroups,Groups]
    });
  };

Comments

[nerianighthawk]

selectGroups: [...state.selectedGroups,Groups]
は
selectGroups: [...state.selectedGroups, newGroups]
の間違いでしょうか？
また、.filter(Boolean)は意味がないと思うのですが、仮に書いているだけの状態でしょうか？

[nerianighthawk]

すみません、.filter(Boolean)が意味がないと言いましたが、書く意味はありました。

[whiwhdiw]

const newGroups = groups.map((g) => {
const Groups =
state.selectGroups.find((selectGroup) => selectGroup.id === g.id);
return Groups ? null : g;
}).filter(Boolean);

[whiwhdiw]

ここのfilter(Boolean) って何をしているのでしょうか？

[nerianighthawk]

Boolean は Boolean Constructor で、引数がある場合はその引数に応じて真偽値が返ります。
Boolean(null)の場合はfalseが返ってきます。
一方 filter は戻り値が true のものを抽出する高階関数です。
その前の map 関数で、不必要な値は null にしているため、次の filter で null の物は false として扱われ、削除されます。

Answer 1

処理の内容はwhiwhdiwさんの認識であっていると思います。
しかし、わざわざ値をnullにした後にfilterにかける意味はないかと思います。
以下のように記述できるかと思います。

  const addGroups = (groups:　Groups[]) => {
    const newGroups = groups.filter((g) => {
      const Groups =
        state.selectGroups.find((selectGroup) => selectGroup.id === g.id);
      return Groups === undefined;
    })
    setState({
      ...state,
      selectGroups: [...state.selectedGroups, ...newGroups]
    });
  };

Comments

[whiwhdiw]

これって値がある時もない時もstateに登録されるという認識で合っているでしょうか？

[nerianighthawk]

newGroupsも展開する必要があったので、修正しました。
newGroupsに値がない時は空の配列になっているので、元々の selectGroups が登録されます。
変更がない場合でも setState の処理は走りますね。

[miyabi-sun]

> `selectGroups: [...state.selectedGroups, ...newGroups]`
質問文のこの箇所読んでて「ん？ってなってましたが」
しっかり手直しされてますねGJ

ただ、質問文のコードが不具合の元になりそうですから、
ちゃんと解答文にしておいたほうが良いかもしれませんね…