React组件不加载帖子

我不明白发生了什么事，因为今天整个工作都在进行中...但是，由于永远的原因，当我尝试去新帖子时，我的Post组件根本没有加载。这是代码：

import React, { Component, useState, useEffect } from "react";
import BlogItem from "./BlogItem";
import { BrowserRouter as Route } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";

function Post({ match }) {
  let { slug } = match.params;
  const [post, setPost] = useState([]);
  const [categories, setCategories] = useState([]);
  useEffect(function getPost() {
    fetch(`/blog/api/getpost/${slug}`)
      .then((response) => response.json())
      .then(({ post: post }) => {
        setPost(post);
        setCategories(post.categories);
      });
  }, []);

  return (
    <div className="post">
      <div className="topPostContainer">
        <h1>{post.title}</h1>
        <div style={{ display: "table" }}>
          <div className="Categories">
            Categories:{" "}
            {typeof categories == "object"
              ? categories.map((category, i) => {
                  if (i + 1 !== categories.length) return category + ", ";
                  else return category;
                })
              : "loading..."}
          </div>
          <div className="Views">Views: {post.views}</div>
        </div>
      </div>
      <div className="postDate">
        {post.createdAt ? new Date(post.createdAt).toLocaleDateString() : ""}
      </div>
      <div
        className="markup"
        dangerouslySetInnerHTML={{ __html: post.sanitizedHtml }}
      />
    </div>
  );
}

export default class BlogCat extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedCategory: "Other",
      categories: [
        {
          category: "Programming",
          selected: false,
        },
        {
          category: "Project Development",
          selected: false,
        },
        {
          category: "NodeJS",
          selected: false,
        },
        {
          category: "Other",
          selected: true,
        },
      ],
      posts: [],
      filteredPosts: [],
    };
  }

  async componentDidMount() {
    const url = "/blog/api/getposts";
    const response = await fetch(url);
    const blogs = await response.json();
    this.setState((prevState) => ({
      posts: blogs,
      filteredPosts: blogs,
    }));
  }

  changeSelection(element) {
    return function () {
      this.setState(
        (prevState) => ({
          categories: prevState.categories.map((category) => {
            if (element.category === category.category) {
              return Object.assign(category, { selected: true });
            } else {
              return Object.assign(category, { selected: false });
            }
          }),
        }),
        () => {
          this.setState(
            (prevState) => ({
              selectedCategory: prevState.categories
                .map((category) => {
                  if (category.selected === true) {
                    return category.category;
                  } else return "error";
                })
                .filter((category) => category !== "error")[0],
            }),
            () => {
              console.log(this.state.selectedCategory);
              this.setState((prevState) => ({
                filteredPosts: this.state.posts.filter((blogPost) =>
                  blogPost.categories.includes(this.state.selectedCategory)
                ),
              }));
            }
          );
        }
      );
    };
  }

  render() {
    return (
      <div>
        <Route exact path="/blog">
          <div className="blogPostsTitle">
            <h1>BLOG POSTS</h1>
          </div>
          <div className="categoriesTitle">Categories</div>
          <div className="categories">
            {this.state.categories.map((element) => (
              <p
                key={uuidv4()}
                onClick={this.changeSelection(element).bind(this)}
                className="categoryItem"
                style={
                  element.selected
                    ? { color: "rgb(166, 113, 232)", fontWeight: "bold" }
                    : { color: "#7b94e8" }
                }
              >
                {element.category}
              </p>
            ))}
          </div>

          {this.state.filteredPosts.map((blogPost) => (
            <BlogItem
              key={uuidv4()}
              title={blogPost.title}
              blurb={blogPost.blurb}
              image={blogPost.thumbnail_url}
              slug={blogPost.slug}
            />
          ))}
        </Route>
        <Route exact path="/blog/:slug" component={Post} />
      </div>
    );
  }
}

此外，我在编译时会收到以下警告：

./src/components/BlogCat.js
[1]   Line 13:16:  Destructuring assignment post unnecessarily renamed                                                      no-useless-rename
[1]   Line 17:6:   React Hook useEffect has a missing dependency: 'slug'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

考虑到从工作时起什么都没有改变，并且自css文件以来所有的改变，我对为什么这不起作用感到震惊。