从 JSON 获取数据时无法读取未定义（读取 'params'）未捕获类型错误的属性

Question

我有一个 Json 包含博客的文件，当我路过时

match: {
        params: { date },
    },

失败了它正在重定向到页面 http://localhost:3000/blog-details/1 但在那之后它失去了所有状态，因为页面抛出意外错误

我的文件是

import React from "react";
import PropTypes from "prop-types";
import NewsletterArea from "../containers/global/newsletter";
import PageBanner from "../containers/global/page-banner";
import Footer from "../layouts/footer";
import Header from "../layouts/header";
import Layout from "../layouts/index";
import BlogData from "../data/blog.json";
import BlogItemContainer from "../containers/blog/blog-item";
import { slugify } from "../utils";
import ScrollToTop from "../components/scroll-to-top";
import SEO from "../components/seo";

const BlogDate = ({
    match: {
        params: { date },
    },
}) => {
    const data = BlogData.filter((blog) => slugify(blog.date) === date);
    const dateTitle = data[0].date;
    return (
        <React.Fragment>
            <Layout>
                <SEO title="Nise-Comport – Blog Date" />
                <div className="wrapper">
                    <Header />
                    <PageBanner
                        title={dateTitle}
                        excerpt="Pleasure rationally encounter consequences <br />
                        are extremely painful great oppurtunity"
                        image="/images/blog/banner.png"
                    />
                    <BlogItemContainer data={data} />
                    <NewsletterArea />
                    <Footer />
                    <ScrollToTop />
                </div>
            </Layout>
        </React.Fragment>
    );
};

BlogDate.propTypes = {
    match: PropTypes.shape({
        params: PropTypes.shape({
            date: PropTypes.string,
        }),
    }),
};

export default BlogDate;

我的json文件是

[
    {
        "id": 1,
        "media": {
            "rcImage": "./images/blog/post/aadhaar-post.png",
            "gridImage": "./images/blog/aadhaar.png",
            "largeImage": "./images/blog-details/aadhaar-banner.png"
        },
        "title": "Aadhaar Demographic Update",
        "author": "Shubham",
        "date": "1 January, 2021",
        "categories": ["Service"],
        "tags": [
            "Aadhaar",
            "Demographic Update",
            "CSC",
            "Pragya Kendra",
            "Digital Seva",
            "Telco",
            "India",
            "NISE-COMPORT",
            "NISE"
        ],
        "body": [
            "<p class='pb-2'>We have happy to share that we have started Aadhaar Demographic update  service<br class='d-none d-xl-block' /> We currently provide the following mentioned service below  </p>",
            "<div class='blog-details-list'><p><i class='fa fa-angle-double-right'></i>Mobile Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Email Id Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Name Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Address Update / Correction</p><p><i class='fa fa-angle-double-right'></i>DOB Update / Correction</p></div>",
            "<div class='blog-qutation'><p>Aadhaar - AAM ADMI KA ADHIKAR </p><i class='icofont-quote-right'>UIDAI</i></div>",
            "<div class='blog-details-grid'><div class='row mb-n7'><div class='col mb-7'><p>To avail this service , user / candidate need to take an prior appointment as per Covid guideline, and shall maintain safety regulation at the premises. Note: Kindly provide the Original document as well as prescribed documentation as per provide by UIDAI Guideline. </p></div><div class='col mb-7 text-end'><img class='d-block mx-auto mx-lg-0' src='/images/blog-details/2.png' alt='img' /></div></p></div></div></div>"
        ]
    },
    {
        "id": 2,
        "media": {
            "rcImage": "./images/blog/post/2.png",
            "gridImage": "images/blog/pan.png",
            "largeImage": "./images/blog-details/pan-banner.png"
        },
        "title": "Pan Card Service",
        "author": "Sanjay Kumar",
        "date": "20 September, 2018",
        "categories": ["Service"],
        "tags": [
            "CSC",
            "Pragya Kendra",
            "Digital Seva",
            "Telco",
            "India",
            "NISE-COMPORT",
            "NISE",
            "PAN",
            "NSDL",
            "UTI"
        ],
        "body": [
            "<p class='pb-2'>We provide Pan service, where user can either apply for new / correction / lost. <br class='d-none d-xl-block' /> we work with major Pan authorised company which is tied up with CSC </p>",
            "<div class='blog-details-list'><p><i class='fa fa-angle-double-right'></i>UTI</p><p><i class='fa fa-angle-double-right'></i>NSDL</p></div>",
            "<div class='blog-qutation'><p>BUILDING A GOOD CUSTOMER EXPERIENCE DOES NOT HAPPEN BY ACCIDENT. IT HAPPENS BY DESIGN</p><i class='icofont-quote-right'>Anonymous</i></div>",
            "<div class='blog-details-grid'><div class='row mb-n7'><div class='col mb-7'><p>For applying Pan card, user need to visit the center (If applying in Physical mode) and provide a copy of Aadhaar & two Passport size photos, for correction additional Pan card copy is required with the correcting details.<br> Do provide the correct details ,if there is any Incorrect data or document is provided. User/Applicant has to bear the charges.   </p></div><div class='col mb-7 text-end'><img class='d-block mx-auto mx-lg-0' src='/images/blog-details/2.png' alt='img' /></div><div class='col-12 mb-7'><p class='pt-2>Pleasure rationally encounter consequences that are extremely painful. Nor again there who loves or pursues or desires to obtain voluptas sit aspernatur aut odit aut fugit, sed consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p></div></div></div>"
        ]
    }
]

控制台出错

blog-details.js:13 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
    at BlogDetailsPage (blog-details.js:13:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

还有

react-dom.development.js:20085 The above error occurred in the <BlogDetailsPage> component:

    at BlogDetailsPage (http://localhost:3000/static/js/bundle.js:14148:7)
    at Routes (http://localhost:3000/static/js/bundle.js:60259:5)
    at NavScrollTop (http://localhost:3000/static/js/bundle.js:3961:51)
    at Wrapper (http://localhost:3000/static/js/bundle.js:4035:78)
    at Router (http://localhost:3000/static/js/bundle.js:60192:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:59668:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我该怎么办？

Answer 1

看来您正在使用 react-router-dom@6，因此不再有任何路线道具。换句话说，props.match 是未定义的。读入 props.match.params 然后抛出错误。

使用 useParams 挂钩访问 date 路由参数。

import { useParams } from 'react-router-dom';

const BlogDate = () => {
  const { date } = useParams();

  const data = BlogData.filter((blog) => slugify(blog.date) === date);
  const dateTitle = data[0].date;

  return (
    <React.Fragment>
      <Layout>
        <SEO title="Nise-Comport – Blog Date" />
        <div className="wrapper">
          <Header />
          <PageBanner
            title={dateTitle}
            excerpt="Pleasure rationally encounter consequences <br />
            are extremely painful great oppurtunity"
            image="/images/blog/banner.png"
          />
          <BlogItemContainer data={data} />
          <NewsletterArea />
          <Footer />
          <ScrollToTop />
        </div>
      </Layout>
    </React.Fragment>
  );
};

export default BlogDate;

从 JSON 获取数据时无法读取未定义（读取 'params'）未捕获类型错误的属性

Cannot read properties of undefined (reading 'params') Uncaught TypeError whilte fetching data from JSON

javascript

reactjs

react-router

react-router-dom