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

Posted 2023-02-23

【中文标题】如何从 ReactJs 中过滤掉数组中的数据

【英文标题】：How to filter out data from array in ReactJs

【发布时间】：2020-08-13 03:40:45

【问题描述】：

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

我是新手，我想知道是否有办法找到当前 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;

【问题讨论】：

那么问题是如何从projectData 数组中过滤掉项目，其中与项目相关的 some 值也在 URL 中被引用？您能否澄清这一点，并使用示例 URL 和 projectData 更新您的问题？

是的！抱歉，我不知道该怎么说。我刚刚用 projectData 和示例 URL 更新了问题！谢谢！

对不起，另一个问题。你使用 react-router 展示，你介意分享你的路由器，路由，它们与MoreProjects 相关吗？他们可能能够使用 route-props。

刚刚添加了moreprojectcards的代码，实际使用了react-router。

这使用了Link，但实际上是什么渲染了最终渲染MoreProjects的Route？

【参考方案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>
  );

【讨论】：

@roneilla 当然，对于 20 个问题的游戏，我很抱歉，但我只是想更清楚地了解您的代码环境。