Question

当前，我要显示的元素的详细信息保存在Info.js中。 Parent.js负责导入所需的详细信息，然后通过.map函数将其分别注入到每个Child.js中，因为存储在Info.js的信息是一个数组。

我想通过用户按下的按钮动态显示相对的Child组件。例如，当用户单击Parent.js处的“ First-Tier”按钮时，将仅显示类别为“ First-Tier”的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;

Answer 1

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

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

const Parent = () => {
  const [partsShown, setPartsShownAndCategory] = useState({
    partsArray: [...Info],
    category: "All"
  });
  const changeCategory = category => {
    const PartsShown = Info.filter(
      element =>
        element.category[1] === category || element.category[0] === category
    );
    setPartsShownAndCategory({
      ...partsShown,
      category: category,
      partsArray: PartsShown
    });
  };
  console.log(partsShown);
  return (
    <div>
      <div>
        {Category.map(element => (
          <button
            style={{ margin: 10 }}
            key={element}
            onClick={() => changeCategory(element)}
          >
            {element}
          </button>
        ))}
      </div>
      <div>{partsShown.category}</div>
      <div>
        {partsShown.partsArray.map(e => (
          <Child key={e.name} name={e.name} category={partsShown.category} />
        ))}
      </div>
    </div>
  );
};

export default Parent;

更改挂钩元素时组件不会更改

1 个答案: