ReactJS筛选功能问题：完善带图/带描述/全部筛选逻辑

Got it, let's get those remaining filter options working properly. Right now your code only handles the star rating filters, so we'll expand it to cover all three missing cases: Semua, Dengan Foto, and Dengan Deskripsi. Here's the step-by-step solution:

1. Update State in App Component #

First, we'll replace the specific ratingStar state with a more general activeFilter state to handle all filter types (since your Radio Group uses mutually exclusive options). Initialize it to "Semua" so all reviews show by default.

2. Expand the Filter Logic #

Modify the filter function to check what filter is active and apply the corresponding logic:

• Semua: Return all reviews (no filtering)
• Dengan Foto: Filter reviews that have at least one image (adjust the property name if your dummy data uses something other than photos)
• Dengan Deskripsi: Filter reviews that have a non-empty, non-whitespace description
• Star Ratings: Keep your existing logic for matching the rating value

3. Fix the Star Rating Icons in Filter Component #

Right now all star buttons show only 1 star—we'll update the Rate component to display the correct number of filled stars for each rating option.

Updated App Component Code #

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./style.sass";
import dummyReview from "./dummy/dummyRivew";
import LatestReview from "./LatestReview";
import { Tabs, Row, Col } from "antd";
import FilterReviewProductDetail from "./FilterReviewProductDetail";

function App() {
  // Single state to track all active filter types
  const [activeFilter, setActiveFilter] = useState("Semua");

  const dataDummy = dummyReview.data;

  const filteredReviews = dataDummy.filter((review) => {
    switch (activeFilter) {
      case "Semua":
        return true; // Show all reviews
      case "DenganFoto":
        // Adjust `photos` to match your dummy data's image field name
        return review.photos && review.photos.length > 0;
      case "DenganDeskripsi":
        // Ensure description exists and isn't just whitespace
        return review.description && review.description.trim().length > 0;
      default:
        // Handle star rating filters (1-5)
        return review.rating == activeFilter;
    }
  });

  function handleFilterChange(selectedValue) {
    setActiveFilter(selectedValue);
  }

  return (
    <div className="mp-review-product-detail">
      <Row>
        <Col md={17} offset={3}>
          <div className="mp-review-product-detail__filter">
            <FilterReviewProductDetail
              actionChangeSelectFilter={handleFilterChange}
            />
          </div>
        </Col>
      </Row>
      <Tabs className="tabs-detail" defaultActiveKey="1" type="card">
        <Tabs.TabPane tab="PERTANYAAN" key="1">
          {filteredReviews.map((review, i) => {
            return <LatestReview key={i} review={review} />;
          })}
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Updated FilterReviewProductDetail Component Code #

import React from "react";
import { Rate, Radio } from "antd";

function FilterReviewProductDetail({ actionChangeSelectFilter }) {
  const filterMap = [
    { name: "Semua", value: "Semua", icon: "" },
    { name: "Dengan Foto", value: "DenganFoto", icon: "" },
    { name: "Dengan Deskripsi", value: "DenganDeskripsi", icon: "" },
    { name: "1", value: 1, icon: <Rate disabled defaultValue={1} count={5} /> },
    { name: "2", value: 2, icon: <Rate disabled defaultValue={2} count={5} /> },
    { name: "3", value: 3, icon: <Rate disabled defaultValue={3} count={5} /> },
    { name: "4", value: 4, icon: <Rate disabled defaultValue={4} count={5} /> },
    { name: "5", value: 5, icon: <Rate disabled defaultValue={5} count={5} /> }
  ];

  return (
    <React.Fragment>
      <span>Filter</span>
      <Radio.Group
        defaultValue={"Semua"}
        size="large"
        onChange={(e) => actionChangeSelectFilter(e.target.value)}
      >
        {filterMap.map((button) => {
          return (
            <Radio.Button key={button.value} value={button.value}>
              {button.name} {button.icon}
            </Radio.Button>
          );
        })}
      </Radio.Group>
    </React.Fragment>
  );
}

export default FilterReviewProductDetail;

Quick Notes: #

• Double-check the field names in the filter logic (like review.photos or review.description) to match exactly what's in your dummyReview data. If your dummy data uses different keys (e.g., imageUrls instead of photos), update those in the filter case.
• The switch statement keeps the filter logic clean and makes it easy to add more filter options later if needed.

内容的提问来源于stack exchange，提问作者Putra Irawan