如何从 ReactJs 中过滤掉数组中的数据

Question

我目前正在编写我的投资组合网站。在每个项目页面内，页脚上方都有一个部分，基本上是为其他项目背书的导航。

我是新手，我想知道是否有办法找到当前 URL（只是扩展名）并将其从正在显示的项目中排除？

我所有的项目数据（链接、标题、名称、描述）都组织在一个数组中，所以理论上应该是

if (projectData.link != currentURL){
// pass the props
}

MoreProjectCard 是一个组件，代码如下：

function MoreProjects() {
  const moreProjects = projectData.map((project) => (
    <MoreProjectCard
      id={project.name}
      key={project.name}
      link={project.link}
      title={project.title}
      description={project.description}
    />
  ));

  return (
    <div className="section padding-h">
      <h3 className="mb-50">View other projects</h3>
      {moreProjects}
    </div>
  );
}

如果需要，我可以提供更多代码。

谢谢！

更新：

项目数据：

export default [
  {
    name: 'doodlevr',
    title: '50 Years of VR',
    link: '/doodlevr',
    category: 'AR/VR, Front End Development',
    description: 'Reinventing the Google Doodle',
  },
  {
    name: 'bridge',
    title: 'Bridge',
    link: '/bridge',
    category: 'UX/UI Design, User Research',
    description: 'Fostering connections between students and mentors',
  },
  {
    name: 'stellar',
    title: 'Stellar',
    link: '/stellar',
    category: 'UX/UI Design',
    description: 'Empowering families through storytelling',
  },
];

一个示例 URL 是 www.roneilla.com/stellar

我会考虑过滤掉“/stellar”

下面是moreProjectCard组件的代码

import React from 'react';
import { Link } from 'react-router-dom';
import { ReactComponent as Arrow } from './../assets/arrow.svg';

import './../Text.css';
import './../App.css';

function MoreProjectCard(props) {
  return (
    <div className="moreProjectCard padding-h" id={props.id}>
      <Link to={props.link}>
        <h4>{props.title}</h4>
        <p>{props.description}</p>
      </Link>
      <Arrow className="more-arrow-icon" />
    </div>
  );
}

export default MoreProjectCard;

更新

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { ReactComponent as Logo } from './assets/logo.svg';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import ScrollToTop from './ScrollToTop';

import CaseStudies from './pages/CaseStudies';
import About from './pages/About';

import Doodlevr from './pages/Doodlevr';

import './App.css';

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <div className="app">
        <Navbar />
        <Route exact path="/" component={CaseStudies} />
        <Route exact path="/doodlevr" component={Doodlevr} />
        <Route exact path="/about" component={About} />
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

Answer 1

如果我了解您的应用程序结构，那么每个路由都会在页面底部呈现一个带有MoreProjects 组件的页面组件。这意味着MoreProjects 正在Route 中呈现，并且可以访问route-props。 locationpathname这条路线是你比较需要的。

由于MoreProjects 是一个功能组件，您可以使用useLocation 挂钩来获取此信息。

所以给定 URL www.roneilla.com/stellar，当前匹配的location.pathname 是/steller。

function MoreProjects() {
  const { pathname } = useLocation();

  const moreProjects = projectData
    .filter(({ link }) => link !== pathname) // <-- filter the link by current pathname
    .map((project) => (
      <MoreProjectCard
        id={project.name}
        key={project.name}
        link={project.link}
        title={project.title}
        description={project.description}
      />
    ));

  return (
    <div className="section padding-h">
      <h3 className="mb-50">View other projects</h3>
      {moreProjects}
    </div>
  );
}