通过ID访问本地文件的数据（来自参数，React Router V6）

Question

我有一个文件project.js，它在const projects = [{id：1，name：lala等}]中包含数据存储。我可以通过array.map函数轻松访问数据，但是我无法弄清楚如何仅使用id从参数中访问一个对象（React Router V6 - useParams（））。

我试图获取，然后尝试了$ {id}在路径和获取等中的不同组合

。

import styled from "styled-components";
import projects from "../assets/data/projects";
import { useParams } from "react-router-dom";

const ProjectStyles = styled.main``;
const Project = () => {
  const { id } = useParams();

  return <ProjectStyles>DATA SHOULD BE HERE and show only one object based on id</ProjectStyles>;
};

export default Project;

等

import {
  FaReact,
  FaHtml5,
  FaCss3Alt,
  FaJsSquare,
  FaGulp,
  FaSass,
} from "react-icons/fa";
import { SiStyledcomponents, SiReactrouter, SiGatsby } from "react-icons/si";
import { GiWomanElfFace } from "react-icons/gi";
import CPHNightClub from "../img/CPHNightClub.png";
import LandrupDans from "../img/LandrupDans.png";
import SmartLights from "../img/SmartLights.png";
import TheProudTracker from "../img/TheProudTracker.png";
import iPlayMusic from "../img/iPlayMusic.png";
import NewsBox from "../img/NewsBox.png";
import Portfolio from "../img/PHolm.png";
import GatsbyAndStyle from "../img/GatsbyAndStyle.png";
const projects = [
  {
    id: 1,
    name: "CPH Night Club",
    head: "Final Exam - simple website with focus on animations",
    desc: "Final Exam at school, a simple website for a night club with lots of animations. Users can see many relevant details regarding the clubs offer, see the gallery, testimonials as well as the newest blogposts and collaborate on that with other users. Besides, the contact info (and contact formular) are provided. Not deployed at it was only working locally with school-provided API.",
    stack: [<FaReact />, <SiStyledcomponents />, <SiReactrouter />],
    link: "not deployed",
    github: "#",
    date: "March 2022",
    img: CPHNightClub,
  },
  {
    id: 2,
    name: "Landrup Dans",
    head: "(Pre-final) Exam, an app for a dance school",
    desc: "Pre-exam (final), an app for a dance school (school project). The app is supposed to give users and teachers overview at activities at school and all important details. It gives possibility to sign for activities. Not deployed at it was only working locally with school-provided API.",
    stack: [<FaReact />, <SiStyledcomponents />, <SiReactrouter />],
    link: "not deployed",
    github: "#",
    date: "March 2022",
    img: LandrupDans,
  },
  {
    id: 3,
    name: "Smart Lights (Hue)",
    head: "Smartlights App based on Philips Hue API (school project)",
    desc: "This app is a school project - where focus was on object oriented programming. Its purpose was to communicate with the physical lamps provided by school (Philips Hue bulbs) via the bridge and Philips Hue API for developers. Not deployed as it is only working on the local bridge and its API.",
    stack: [<FaReact />, <GiWomanElfFace />, <SiReactrouter />],
    link: "not deployed",
    github: "https://github.com/paulineholm/smartlights-hue",
    date: "February 2022",
    img: SmartLights,
  }
];

export default projects;

Answer 1

您可以使用使用array.prototype.filter（）方法过滤 projects 方法

Project.js
import styled from "styled-components";
import projects from "../assets/data/projects";
import { useParams } from "react-router-dom";

const ProjectStyles = styled.main``;
const Project = () => {
  const { id } = useParams();
  const filteredProject = projects.filter(thisProject => thisProject.id === id);
 // use filteredProject 
  return <ProjectStyles>DATA SHOULD BE HERE and show only one object based on id</ProjectStyles>;
};

export default Project;

Answer 2

项目是一个数组，使用 array.prototype.find 方法是搜索具有匹配ID的元素的数组。

要记住的事情：

• id路由参数将是字符串类型，而id projects projects 数据是数字类型，所以当使用严格的平等（ IE === ）时，您需要在搜索数组时使用类型的安全比较。
• array.prototype.find返回undefined如果在谓词函数中找不到匹配元素。 UI代码应优雅处理缺失/找不到的项目数据。

代码

const Project = () => {
  const { id } = useParams();
  const project = projects.find(project => String(project.id) === id);

  return project
    ? (
      <ProjectStyles>
        ... render project data as JSX ...
      </ProjectStyles>
    )
    : "No project found.";
};