如何从 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() {

  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>

  );

}