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

Question

I'm currently coding my portfolio website. Inside each project page, there is a section above the footer that is basically a nav to endorse other projects.

I'm new to react, and I was wondering if there was a way to find the current URL (just the extension) and exclude that from the projects being displayed?

All my project data (link, title, name, description) are organized in an array, so theoretically it would be

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

The MoreProjectCard is a component, code is below:

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

I can provide more code if needed.

Thank you!

Update:

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',
  },
];

an example URL would be www.roneilla.com/stellar

I would be looking at filtering out "/stellar"

below is the code for the moreProjectCard component

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;

Update

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

If I understand your app structure, then each route renders a page component with a MoreProjects component at the bottom of the page. This means MoreProjects is being rendered within a Route and has access to the route-props . The route location pathname is what you need for comparisons.

Since MoreProjects is a functional component you can use the useLocation hook to get this information.

So given URL www.roneilla.com/stellar , the current matching location.pathname is /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>
  );
}