时间戳

首页 > 解决方案 > 按类别过滤

arrays - 按类别过滤

问题描述

我需要根据用户单击的按钮过滤掉这些数据组件，在这种情况下，我需要映射到“jobTitle”。并且按钮需要位于组件之外。

在这种情况下，redux 怎么样？

我的数据组件如下所示：

const WorkState = [
    {
        title: 'the Zeipt factory',
        jobTitle: 'Web developer',
        mainImg: project,
        pic: project2,
        pic2: project3,
        url: "/work/zeipt",
        desc: [
            {
                title: 'Description',
                description: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
                tools: 'React, Golang, ReactNative'
            }
        ]
        
    },

但问题是我已经在我的组件中使用了过滤器，它用 URL 构造了我的所有数据，如下所示：

const Detail = () => {

    const history = useHistory();
    const url = history.location.pathname;
    const [works, setWorks] = useState(WorkState);
    const [work, setWork] = useState();
    

    //UseEffect
    useEffect(() => {
        const currentWork = works.filter((stateWork) => stateWork.url === url);
        setWork(currentWork[0]);
        
      }, [works, url]);
      console.log(work)
      

    return (
        <>
        {work && ( 
            <Container exit="exit" variants={pageAnimation} animate="show" initial="hidden">
                <Headline>
                <h2>{work.title}</h2>
                <h3>{work.jobTitle}</h3>
                    <Imgwrap>
                        <img src={work.mainImg} alt="main img" />
                        <img src={work.pic} alt="main img" />
                        <img src={work.pic2} alt="main img" />
                    </Imgwrap>
                    <Desc>
                        {work.desc.map((info) => (
                            <Info 
                            title={info.title}
                            description={info.description}
                            tools={info.tools}
                            key={info.title} />
                        ))}
                    </Desc>
                    
                    
                </Headline>
           
            </Container>
           
                     
        )} 
        </>
    )
    
};

我尝试了很多东西，但从来没有真正让这个工作

哦，这个组件是按钮需要放置的位置，如下所示：

const Work = () => {

  

    return(
        
        <Container exit="exit" variants={pageAnimation} animate="show" initial="hidden">
                <Frame1 variants={slider}></Frame1>
                <Frame2 variants={slider}></Frame2>
                <Frame3 variants={slider}></Frame3>
                <div className="filter">
                    <button>I WANT MY BUTTON HERE :)</button>
                </div>
                
            <Project>
                <motion.h2 variants={fade}>The Zeipt Project</motion.h2>
                <motion.div variants={LineAnimation} className="line"></motion.div>
                <Link to="/work/zeipt">
                    
                    
                    <Hide>
                        <motion.img variants={photoAnimation} src={work} alt="project one"/>
                    </Hide>
                    
                </Link>
            </Project>
            
            
            <Project>
                <h2>Company</h2>
                <div className="line"></div>
                <Link to="/work/company">
                    <img src={work2} alt="project two"/>
                </Link>
            </Project>
            
          
          
            <ScrollTop />
        </Container>
    )
};

标签： arraysreactjsreduxfilterfrontend

解决方案

我建议使用 useMemo 而不是 useState 钩子并链接它们。

  1. 我认为 WorkState 是来自 redux 的数据，您可以访问这些数据作为您的基础数据。
  2. 要获得您的单一工作，请使用 useMemo 挂钩来减少噪音：
 const work = React.useMemo(() => works.find((stateWork) => stateWork.url === url)}, [works, url]);

如果 url 或 works 更改，这将执行，并将返回它找到的第一个项目。无需过滤。

现在对于第二个过滤的作品，您可以使用相同的：

const [selectedFilter, setFilter] = React.useState():
...
const filteredWorks = Rect.useMemo(() => works.filter(YOUR FILTER FUNCTION DEPENDING ON THE BUTTON CLICKED),[works, selectedFilter])

Now you only need to pass the setFilter function to Work and update the state there.

推荐阅读