如何从 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>

  );

}

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

谢谢！

Answer 1

如果我了解您的应用程序结构，那么每个路由都会呈现一个页面组件，该MoreProjects组件位于页面底部。这意味着MoreProjects在 a 中呈现Route并且可以访问route-props。路线位置 pathname是您进行比较所需要的。由于MoreProjects它是一个功能组件，因此您可以使用useLocation挂钩来获取此信息。所以给定 URL www.roneilla.com/stellar，当前匹配location.pathname的是/steller.function MoreProjects() {&nbsp; const { pathname } = useLocation();&nbsp; const moreProjects = projectData&nbsp; &nbsp; .filter(({ link }) => link !== pathname) // <-- filter the link by current pathname&nbsp; &nbsp; .map((project) => (&nbsp; &nbsp; &nbsp; <MoreProjectCard&nbsp; &nbsp; &nbsp; &nbsp; id={project.name}&nbsp; &nbsp; &nbsp; &nbsp; key={project.name}&nbsp; &nbsp; &nbsp; &nbsp; link={project.link}&nbsp; &nbsp; &nbsp; &nbsp; title={project.title}&nbsp; &nbsp; &nbsp; &nbsp; description={project.description}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; ));&nbsp; return (&nbsp; &nbsp; <div className="section padding-h">&nbsp; &nbsp; &nbsp; <h3 className="mb-50">View other projects</h3>&nbsp; &nbsp; &nbsp; {moreProjects}&nbsp; &nbsp; </div>&nbsp; );}