Как отфильтровать данные из массива в ReactJs - PullRequest
Новая
       47

Как отфильтровать данные из массива в ReactJs

0 голосов
/ 29 апреля 2020

Я в настоящее время кодирую свой сайт портфолио. Внутри каждой страницы проекта есть нижний колонтитул, который в основном представляет собой навигацию для поддержки других проектов.

Я новичок, чтобы отреагировать, и мне было интересно, есть ли способ найти текущий 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;

1 Ответ

0 голосов
/ 29 апреля 2020

Если я понимаю структуру вашего приложения, то каждый маршрут отображает компонент страницы с компонентом 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>
  );
}
...