Javascript 如何从ReactionRedux中来自API调用的数据中筛选值

我正在使用REACT和REDUX从API调用中获取数据，现在我已经创建了一个新变量，并为其分配了相同的数据.在代码中，我将操作这个名为filterClassfied的新变量来显示结果.问题是，当页面加载时，它只是空的，最初没有存储任何内容，因此在表中显示0个结果.因此，数据不是从原始数据填充的，也就是从分类到过滤分类.我应该在哪里修改Reaction类或Redux中的实现，即Actions/Reducer？

以下是代码

Classifieds.js

import React, { useState,useEffect,useMemo } from "react";
import './classifieds.scss'
import { OverlayBox } from "../../components/Main-Pages/overlay-box/overlay-box";
import { SideFilter } from "../../components/Main-Pages/side-filter/side-filtrer";
import Table from 'react-bootstrap/Table';
import { NavLink } from 'react-router-dom';
import Card from 'react-bootstrap/Card';
import { useDispatch, useSelector } from 'react-redux';
import SpinnerButton from "../../components/Spinner/Spinner";
import { getClassifieds } from "../../redux/actions/classifiedsAction";

export const Classifieds = ()=>{

  const dispatch = useDispatch();

    const buttons = ['Show All','Rental','Services','Wanted','Cars','For Sale', 'More'];
    const moreButtons = ['Baby sitting','Beauty parlor','Fashion','Household Help'
    ,'Real Estate','Others'];

    const [active,setActive] = useState('Show All');
    const [activeMoreButtons,setActiveMoreButtons] = useState('');
    const [modal,setModal] = useState(false);

  const classifieds = useSelector((state) => state.classifieds.Classifieds);
  const classifiedsLoading = useSelector((state) => state.classifieds.loading);

  // const [filterClassifieds,setFilterClassifieds] = useState(classifieds);

  // useEffect(() => {
  //   setFilterClassifieds(classifieds);
  // }, [classifieds]);

  const filterClassifieds = classifieds.filter((item) => {
    return active !== "Show All" ? item.category === active : true;
  });
  
    const handleButton = (name)=>{
        if(modal)setModal(false);
        setActiveMoreButtons('');
        setActive(name);
        // if(name==='Show All'){
        //    setFilterClassifieds(classifieds);
        // }else{
        //    let newClassifieds = classifieds.filter((itm)=>
        //   {
        //     return itm.category === name;
        //   }
        //   )
        //   setFilterClassifieds(newClassifieds);
        // }
    }

    const openModal =()=>{
        setModal(!modal);
    }

    const handleMoreButton=(name)=>{
        setActive('More');
        setModal(!modal);
        setActiveMoreButtons(name)
    }

    useEffect(() => {
      const generateClassifieds = async () => {
          await dispatch(getClassifieds());
        };
        generateClassifieds();
  }, [dispatch]);


  const transformDate = (datePosted)=> {
      let newDate = new Date(datePosted);
      return newDate.toLocaleDateString("en-US");
  }

  // console.log(filterClassifieds);
    return(
        <div>
         <OverlayBox name={"Classifieds"}/>
             {/* <div classNameName="row">
        //         <div classNameName="col-4">
        //             <SideFilter/>
        //         </div>
        //         <div classNameName="col-8"> column</div>
        //     </div> */}
        <div className="section properties">
    <div className="container">
      <ul className="properties-filter">
          {
            buttons.map((name,index)=>{
            return name!=='More' ?(
            <li key={ index }>
            <button
                 className={active === name ? 'is_active' : ''}
                 onClick={()=>handleButton(name)}
                 >{name}</button>        
            </li>
            ):(
                <li key={ index }>
            <button
                 className={active === name ? 'is_active' : ''}
                 onClick={()=>openModal(name)}
                 >
                    {name}
                 <i className="fa fa-arrow-down-short-wide"></i>
                 </button>
                 {
                    modal?
                        <Card body className='card-design'>
                            <ul>
                            {moreButtons.map((val,index)=>
                            (
                            <li className={activeMoreButtons === val ? 'card-active card-li' : 'card-li'} key={index} onClick={()=>handleMoreButton(val)}>        
                            {val}
                            </li>
                            ))}
                            </ul>
                            </Card>:<></>
                 }        
            </li>
            )
})
          }
      </ul>
      <div className="row properties-box">
        <div className="col-9 properties-header">
            <p className="properties-text">
                Free Classifieds
            </p>
            </div>
        <div className="col-3 text-end properties-text">
        <NavLink to='/post-ad' className='col-lg-2'>Post Ad</NavLink>
        </div>
      <Table striped hover>
      <thead>
        <tr>
          <th>Category</th>
          <th>Description</th>
          <th>Date Posted</th>
        </tr>
      </thead>
        {classifiedsLoading?<></>:
      <tbody>
        {filterClassifieds?.map((val,ind)=>(
          <tr key={ind}>
            <td>{val?.category}</td>
            <td>{val?.heading.split('', 86).reduce((o, c) => o.length === 85 ? `${o}${c}...` : `${o}${c}` , '')}</td>
            <td>{transformDate(val?.date)}</td>
          </tr>
        ))}
      </tbody>
        }
    </Table>
      </div>
      {/* <div className="row">
        <div className="col-lg-12">
          <ul className="pagination">
            <li><a href="#">1</a></li>
            <li><a className="is_active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#"></a></li>
          </ul>
        </div>
      </div> */}
    </div>
  </div>

            </div>
        
    )

}

Action.js

import axios from "axios";

export const GET_CLASSIFIEDS = "GET_CLASSIFIEDS";
export const CLASSIFIEDS_LOADING = "CLASSIFIEDS_LOADING";

// Get all posts
export const getClassifieds = () => (dispatch) => {
    dispatch(setClassifiedsLoading());
    axios
      .get("/posts")
      .then((res) =>
        dispatch({
          type: GET_CLASSIFIEDS,
          payload: res.data,
        })
      )
      .catch((err) =>
        dispatch({
          type: CLASSIFIEDS_LOADING,
          payload: {},
        })
      );
  };
  

  // Classifieds loading
  export const setClassifiedsLoading = () => {
    return {
      type: CLASSIFIEDS_LOADING,
    };
  };

Reducer.js

import { GET_CLASSIFIEDS, CLASSIFIEDS_LOADING } from "../actions/classifiedsAction";

const initialState = {
  Classifieds: null,
  filterClassifieds: null,
  loading: true,
};

export const ClassifiedsReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_CLASSIFIEDS:
      return {
        ...state,
        Classifieds: action.payload,
        loading: false,
      };
    case CLASSIFIEDS_LOADING:
      return {
        ...state,
        loading: true,
      };
    default:
      return state;
  }
};

编辑以使内容更清晰: 最初，我的分类广告和过滤器分类广告在分派前都是空的，但几毫秒后，数据将填充到分类广告中，但不会填充到过滤器分类广告中

Here's the screenshot of the log