如何更改React项目中创建的类别的默认项

Question

描述：

在我的 React 项目中，我有一个部分展示我以前的项目。此处默认选择的类别显示为“全部”。但是，由于项目数量较多，为了响应式设计并减少用户过度滚动的需要，我想将默认选择的类别设置为“UI / UX Design”。当选择“全部”类别时，它应该显示所有项目。

Portfolio.jsx：

import React, { useState } from 'react'
import List from './List'
import Items from './Items'
import {projects} from '../../Data'
import "./portfolio.css";
import { AnimatePresence } from 'framer-motion';

const allNavList = ['all', ...new Set(projects.map((project) => project.category))];

console.log(allNavList);

const Portfolio = () => {
    const [projectItems, setMenuItems] = useState(projects);
    const [navList, setCategories] = useState(allNavList);

    const filterItems = (category) => {
        if (category === 'all'){
            setMenuItems(projects);
            return;
        }

        const newProjectItems = projects.filter(
            (item) => item.category === category
        );

        setMenuItems(newProjectItems);
    }

  return (
    <section className='portfolio section' id='work'>
        <h2 className="section__title text-cs">Portfolio</h2>
        <p className="section__subtitle">
            My <span>Cases</span>
        </p>

        <List List={navList} filterItems={filterItems} />

        <div className="portfolio__container container grid">
            <AnimatePresence initial={false}>
                <Items projectItems={projectItems} />
            </AnimatePresence>
        </div>
    </section>
  )
}

export default Portfolio

List.jsx：

import React, { useState } from 'react'

const List = ({ List, filterItems }) => { 
    const [active, setActive] = useState(0);

    return (
      <div className='portfolio__list'>
        {List.map((category, index) => {
          return (
            <button 
            className={`${
                active === index ? 'active-work' : ''
            } portfolio__list-item text-cs`}
             key={index} 
             onClick={() => {
                setActive(index);
                filterItems(category);
            }}
            >
              {category}
            </button>
          );
        })}
      </div>
    );
  };
  

export default List

Items.jsx：

import React from 'react'
import {FaArrowRight} from 'react-icons/fa'
import shapeTwo from "../../assets/shape-2.png"
import {motion} from 'framer-motion';

const Items = ({projectItems}) => {
  return (
    <>
    {projectItems.map((projectItems) => {
        const {id, img, category, title, description} = projectItems;
        return(
            <motion.div 
            layout
            animate={{ opacity:1, scale:1 }}
            initial={{ opacity:0.8, scale:0.6 }}
            exit={{ opacity:0.8, scale:0.6 }}
            transition={{duration: 0.5}}
            className="portfolio__items card card-two" 
            key={id}>
                <div className="portfolio_img-wrapper">
                    <img src={img} alt='' className="portfolio__img" />
                </div>

                <span className="portfolio__category text-cs">{category}</span>
                <h3 className='portfolio__title'>{title}</h3>
                <p className="portfolio__description">{description}</p>

                <a href="" className="link">
                    See Pricing
                    <FaArrowRight className='link__icon'></FaArrowRight>
                </a>

                <img src={shapeTwo} alt="" className="shape c__shape" />
            </motion.div>
        )
    })}
    </>
  )
}

export default Items

预期行为：

未选择特定类别时，默认类别选项应为“UI/UX Design”。

我尝试过的：

我尝试像这样更改代码，但它对我不起作用。

Portfolio.jsx：

const allNavList = ['**UI UX DESIGN**', ...new Set(projects.map((project) => project.category))];

console.log(allNavList);

const Portfolio = () => {
    const [projectItems, setMenuItems] = useState(projects);
    const [navList, setCategories] = useState(allNavList);

    const filterItems = (category) => {
        if (category === '**UI UX DESIGN**'){
            setMenuItems(projects);
            return;
        }

        const newProjectItems = projects.filter(
            (item) => item.category === category
        );

        setMenuItems(newProjectItems);
    }

List.jsx：

const List = ({ List, filterItems }) => { 
    const [active, setActive] = useState(**1**);

Answer 1

需要更改几行。

List.jsx

默认活动状态值不应为 0。

const List = ({ List, filterItems }) => {
  const [active, setActive] = useState(-1);

Portfolio.jsx

默认的projectItems状态值应按

ux/ui

类别过滤。

const Portfolio = () => {
  const [projectItems, setMenuItems] = useState(
    projects.filter((item) => item.category === "ux/ui")
  );
  const [navList, setCategories] = useState(allNavList);

  const filterItems = (category) => {
    if (category === "all") {
      setMenuItems(projects);
      return;
    }

    const newProjectItems = projects.filter(
      (item) => item.category === category
    );

    setMenuItems(newProjectItems);
  };

您可以从CodeSandbox检查工作版本。