使用反应挂钩过滤类别

Question

我正在学习 React，有时我写的代码行太多，我想看看其他人如何以更好的方式解决这个问题。

我创建了一个学院的登录页面，列出了他们提供的课程以及与他们相关的所有内容。这是代码

  const [courses, setCourses] = useState([]);

  useState(() => {
    axios
      .get("db.json")
      .then((response) => {
        setCourses(response.data.courses);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="container">
      <div className="course-header">
        <h1>Course List</h1>
// here I want to display some categories //
      </div>
      {courses.map((course) => (
        <div data-cy={"course-" + course.id} key={course.id}>
          <h2> {course.title}</h2>
          <div> {course.description}</div>
          <br />
          <div>
            <h4>Category:</h4>
            {course.category}
          </div>
          <br />
          <div>
            <h4>Instructors:</h4> {course.instructors}
          </div>
          <br />
          <div> {course.info}</div>
          <br />
          <div>
            <h4>Price:</h4> {course.price}
          </div>
          <br />
        </div>
      ))}
    </div>
  );
};

很公平，现在我们每次呈现时都有信息，但现在我想在标题旁边显示不同的类别，一旦你点击其中一个，我只想显示与以下课程相关的课程那个类别。我的想法是我应该将 useEffect 与 onClick 事件一起使用，但是，我可以只使用我已经拥有的相同 useState 来做同样的事情吗？

顺便说一句，我的 json 看起来像这样：

{
  "courses": [
    {
      "title": "",
      "slug": "",
      "category": "",
      "dates": [],
      "price": "",
      "active": true,
      "description": "",
      "info": "",
      "instructors": ""
    },
}

Answer 1

为此，您需要存储单击的类别，然后使用以下代码过滤您的课程数组以仅显示具有该类别的课程：

import _ from "lodash";

const [courses, setCourses] = useState([]);
const [filteredCourses, setFilteredCourses] = useState([]);

useState(() => {
    axios
      .get("db.json")
      .then((response) => {
        setCourses(response.data.courses);
        setFilteredCourses(response.data.courses);
        setCategories(_.uniqBy(response.data.courses.map(course => 
        course.category), 'category');
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

{filteredCourses.map((course) => (
<div data-cy={"course-" + course.id} key={course.id}>
  <h2> {course.title}</h2>
  {categories.map(category => (
    <button onClick={() => onClickButton(category)}>{category}</button>
  )}
  ...

// this function is executed when you click on the button you mentioned
// chosenCategory below is the category clicked
const onClickButton = (chosenCategory) => {
  setFilteredCourses(courses.filter(course => course.category === chosenCategory)
}

过滤方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Uniq 通过 lodash 的方法：https://www.geeksforgeeks.org/lodash-_-uniqby-method/

使用反应挂钩过滤类别

Filtering categories with react hooks

higher-order-functions

reactjs

react-hooks

use-effect

use-state