通过 id 从本地文件访问数据（来自 params，React Router v6）

Question

我有一个文件 project.js，其中包含 const projects = [{id:1, name: lala, etc.}] 中的数据存储。我可以通过 array.map 函数轻松访问数据，但我无法弄清楚如何使用源自参数的 id 仅访问数组中的一个对象（React Router v6 - useParams()）。

我尝试获取并在路径和获取等方面尝试了 ${id} 的不同组合

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();

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

export default Project;

Projects.js

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

projects是一个数组，使用Array.prototype.find方法在数组中搜索匹配id.

的元素

注意事项：

id 路由参数将是字符串类型，而 projects 数据中的 id 属性是数字类型，因此您需要使用使用严格相等搜索数组时的类型安全比较（即===）。
Array.prototype.find returns undefined 如果没有找到与谓词函数匹配的元素。 UI 代码应该优雅地处理 missing/not 找到的项目数据。

代码

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.";
};

通过 id 从本地文件访问数据（来自 params，React Router v6）

Accessing data from local file by id (from params, React Router v6)

parameters

fetch

reactjs

react-router