[React] 二次元配列のfilterについて

Question

開発環境

• react v17.0.2

実装内容

ボタンにより、statusを更新し、その値に応じて以下のような2次元配列にfilterをかけたいと思っています。

import { useState } from "react";

const initialState = [
  {
    name: "Tom",
    hobbies: [
      { name: "baseball", status: 2 },
      { name: "soccer", status: 1 }
    ]
  },
  {
    name: "Bob",
    hobbies: [
      { name: "soccer", status: 1 },
      { name: "fishing", status: 2 }
    ]
  },
  {
    name: "June",
    hobbies: [
      { name: "soccer", status: 2 },
      { name: "boxing", status: 2 }
    ]
  },
  {
    name: "Taro",
    hobbies: [
      { name: "kendo", status: 1 },
      { name: "boxing", status: 2 }
    ]
  },
  { name: "Jiro", hobbies: [{ name: "judo", status: 2 }] }
];

export default function App() {
  const [array, setArray] = useState(initialState);
  const [status, setStatus] = useState("__all__");

  const filtered = array.filter((x) => {
    const _filtered = x.hobbies.filter((hobby) => {
      return status === "__alll__" || hobby.status === status;
    });
    if (_filtered.length > 0) {
      x.hobbies = _filtered;
      return x;
    }
    return _filtered.length > 0;
  });

  return (
    <div className="App">
      <button onClick={() => setStatus(1)}>status: 1</button>
      <button onClick={() => setStatus(2)}>status: 2</button>
      <button onClick={() => setStatus("__all__")}>status: all</button>
    </div>
  );
}

うまく動作していない部分

1. 初回レンダリング時は、statusが「all」なので、全件表示したいが、filteredの値が空になっている
2. ボタンを押す順番で結果が違う（初めにボタンで status = 1 にするときと、status = 2 にするときとではfilteredの値が異なる）

実現したいこと

statusの状態に応じて、常に同じ結果を得たい。

Answer 1

修正提案箇所が3点あります。

(1) まず、return status === "__alll__" || hobby.status === status;の行ですが、これの条件の前半部は "__all__" のスペルミスですね。おそらく「うまく動作していない部分」の1はこれが原因かと思われます。

(2) 続いて、_filtered で hobby を絞り込んだあとの処理 (以下のコード) についてです。

// オリジナルのコードより引用
if (_filtered.length > 0) {
  x.hobbies = _filtered;
  return x;
}

ここで x (arrayの要素) を上書きするとマズイので、次のようにコピー _x を作って返却するように変更しました。上書きしてしまうと、「うまく動作していない部分」の2で言及されたような現象が発生します。

if (_filtered.length > 0) {
  const _x = { name: x.name, hobbies: _filtered };
  return _x;
}

(3) 最後に array.filter() でなく、array.map() を使うと適切な結果配列を得られます。
ここまでを総合すると、 配列 filtered は以下のように求められます。

const filtered = array.map((x) => {
  const _filtered = x.hobbies.filter((hobby) => {
    return status === "__all__" || status === hobby.status;
  });
  if (_filtered.length > 0) {
    const _x = { name: x.name, hobbies: _filtered }
    return _x;
  }
}).filter(item => !!item);