使用 React Router 导航到页面时，useEffect 根本没有运行

Question

应用程序.js：

import React, { Fragment } from "react";
import Header from "./components/Header";
import PostList from "./components/PostList";
import Post from "./components/Post";
import TagList from "./components/TagList";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <Fragment>
      <Router>
        <Header />

        <Switch>
          <Route exact path="/" component={PostList} />
          <Route path="/tags" component={TagList} />
          <Route path="/posts/:id" component={Post} />
        </Switch>
      </Router>
    </Fragment>
  );
};

export default App;

Post.js：

import React, { useEffect, useState } from "react";
import Tag from "./Tag";
import { useParams } from "react-router-dom";
import axios from "axios";

const Post = () => {
  const { id } = useParams();
  const [post, setPost] = useState({});

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const res = await axios.get(`/api/posts/${id}`);

        setPost(res.data);
      } catch (err) {
        console.error(err);
      }
    };
    fetchPost();
  }, []);

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.text}</p>
      <div>
        {post.tags.map((tag) => (
          <Tag key={tag._id} tag={tag} />
        ))}
      </div>
    </div>
  );
};

export default Post;

我正在尝试启动并运行一个简单的博客站点的骨架，但我遇到了 Post 组件的问题。 当导航到使用路径“/posts/:id”的特定帖子时，应该从我的 API 中获取帖子的 useEffect 似乎没有运行，并且不可避免地我最终会遇到“post.tags is undefined”错误。 Everything else is working correctly - API responds as expected to requests from Postman and 'useParams' is grabbing the post id from the URL just fine - it's just that the useEffect isn't running at all ( console.logs aren't showing up either ）。

我在以前的项目中以这种方式做事没有任何问题 - 实际上 TagList 组件中的 useEffect 几乎相同，并且 /tags 路由按预期工作，所以我不确定我错过了什么？

Answer 1

useEffect仅在第一次渲染时运行，然后在指定的依赖项已更改时在任何其他渲染时运行。 由于您在那里添加了一个空数组，因此它们永远不会改变。

如果希望在帖子 id 发生变化时再次运行useEffect ，则需要添加id作为 useEffect 的依赖项。

useEffect(() => {
  ....
}, [id, setPost]);

此外，您的post.tags仍然是未定义的，因为数据是在组件完成渲染之后出现的，因此您应该在返回之前检查是否有发布数据，如果没有发布数据，返回 null 或加载骨骼。