フックされた要素が変更されてもコンポーネントは変更されません

現在、表示したい要素の詳細はに保存されていInfo.jsます。Parent.jsにChild.js格納されている情報Info.jsは配列であるため、必要な詳細をインポートし、.map関数によってそれぞれに挿入する責任があります。

ユーザーが押したボタンで相対的な子コンポーネントを動的に表示したい。たとえば、ユーザーがで[First-Tier]ボタンをクリックすると、「First-Tier」のカテゴリのコンポーネントParent.jsのみChild.jsが表示されます。現時点では、私のコードは機能していません。問題はuseEffectにあると思いますが、これを修正する方法がわかりません。

あなたのインスピレーションを楽しみにしています。ありがとう、そして安全を保ってください。

---> Parent.js

import React, { useState, useEffect } from "react";
import Info from "./Info";
import Child from "./Child";

let Category = ["All", "First-Tier", "Second-Tier"];

const Parent = () => {
  const [categoryChosen, setCategoryChosen] = useState("All");
  let PartsShown = [...Info];
  useEffect(() => {
    PartsShown = [
      ...PartsShown.filter((e) => e.category[1] === categoryChosen),
    ];
  }, [categoryChosen, PartsShown]);
  return (
    <div>
      <div>
        {Category.map((element) => (
          <button
            style={{ margin: 10 }}
            key={element}
            onClick={() => setCategoryChosen(element)}
          >
            {element}
          </button>
        ))}
      </div>
      <div>{categoryChosen}</div>
      <div>
        {PartsShown.map((e) => (
          <Child
            key={e.name}
            name={e.name}
            category={e.category[1]}
          />
        ))}
      </div>
    </div>
  );
};

export default Parent;

---> Child.js

import React from "react";

const Child = ({ name, category }) => (
  <div style={{ margin: 10 }}>
    <h1>{name}</h1>
    <p>{category}</p>
    <hr />
  </div>
);

export default Child;

-> Info.js

const Info = [
  {
    name: "A",
    description: "Description of A ",
    category: ["All", "First-Tier"],
  },
  {
    name: "B",
    description: "Description of B",
    category: ["All", "Second-Tier"],
  }
];
export default Info;