javascript - ReactJs 组件显示旧数据(甚至不是列表)

Question

import { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

const Post = () => {
  const params = useParams();

  const [post, setPost] = useState(null);

  useEffect(() => {
    fetchPost();
  }, []);

  const fetchPost = () => {
    axios
      .get(
        `https://api.example/v1/json/post?post=${params.postSlug}`
      )
      .then((response) => {
        setPost(response.data.data.post);
      })
      .catch((error) => console.log({ error }));
  };

  return post ? (
    <div className="singlePost">
      <div className="content" key="content">{post.content}</div>
    </div>
  ) : null;
};

export default Post;

这是我的整个组件，API 是在 laravel 上开发的。如果我更改来自 db 的后端数据，React 客户端不会提取新内容，而如果我将端点粘贴到浏览器或 Postman 中，它会显示更新的内容。我知道我可以在 url 的末尾添加一个时间戳来强制前端每次都提取新数据，但这会影响应用程序的效率。有人可以在不使用任何缓存突发(即 url 中的时间戳或 axios header 中的“无缓存”)的情况下解释此问题的原因和解决方案。

提前致谢

Answer 1

如果您确定数据库中的数据已更新，您的后端工作正常并且您正在刷新您的 React 应用程序但仍然看不到更新后的数据，那么我们没有足够的信息来解决您的问题。

您确定您从 postman 和 React 应用程序发出相同的请求吗？您是否尝试从浏览器中删除缓存？

调试此问题的一个解决方案可能是创建一个按钮，该按钮在单击时调用您的 fetchPost 方法并查看会发生什么