如何在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>
  );
}

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

谢谢！

更新：

projectData：

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。比较需要使用路由location pathname。

由于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>
  );
}