仅当已获取帖子时，如何使帖子加载

Question

每次我打开一个新的帖子页面时，上一篇帖子的数据都会在屏幕上显示几毫秒，然后显示新数据。 我试图检查帖子是否正在加载并使用 setIsLoading 函数将其设置为状态，但它不起作用。 请看下面的代码：

const PostPage = ({post, setPost, isLoading, setIsLoading}) => {
  const location = useLocation()
  const pathname = location.pathname.split("/")[2]

  useEffect(() => {
    setIsLoading(true)
    const fetchData = async () => {
      let res = await axios.get(`http://localhost:4000/posts/${pathname}`)
      const postData = res.data
      setPost(postData)
      setIsLoading(false)
    }
    fetchData()
  }, [])

  return (
    <>
      {!isLoading && (
        <div>
          <h1>{post.title}</h1>
          <p>{post.text}</p>
        </div>
      )}
    </>
  )
}

这些是我的路线：

<Switch>
          <Route path="/" exact>
            {isLogged && (
              <AddPost
                posts={posts}
                setPosts={setPosts}
                postTitle={postTitle}
                setPostTitle={setPostTitle}
                postText={postText}
                setPostText={setPostText}
                setIsLoading={setIsLoading}
              />
            )}
            <div className="posts-row">
              {posts.slice(0).reverse().map(post => (
                <Post
                  key={post.id}
                  id={post.id}
                  postTitle={post.title}
                  postText={post.text}
                  isLogged={isLogged}
                  posts={posts}
                  setPosts={setPosts}
                  />
              ))}
            </div>
          </Route>
          <Route path="/posts/:id" exact>
            <PostPage
              post={post}
              setPost={setPost}
              isLoading={isLoading}
              setIsLoading={setIsLoading}
            />
          </Route>
        </Switch>

在 App.js 中，我将 isLoading 设置为 true，但它仅适用于第一篇文章。 为了 React，请不要报告我的问题：D

编辑： Post.js

const Post = ({postTitle, postText, isLogged, posts, setPosts, id}) => {

  const removePost = async (id) => {
    const postArray = posts.filter((post) => (post.id !== id))
    let res = await axios.delete(`http://localhost:4000/posts/${id}`)
    setPosts(postArray)
  }

  return (
    <div className="post">
      <Link to={`/posts/${id}`}>
        <strong>
          {postTitle}
        </strong>
      </Link>
      <p>{postText}</p>
      {isLogged && (
        <button onClick={() => removePost(id)}>
          ????️
        </button>
      )}
    </div>
  )
}

Answer 1

您的效果挂钩仅在组件首次挂载时运行。如果您想在每次pathname 更改时运行它，请将其添加到其依赖数组中：

useEffect(() => {
  setIsLoading(true)
  const fetchData = async () => {
    let res = await axios.get(`http://localhost:4000/posts/${pathname}`)
    const postData = res.data
    setPost(postData)
    setIsLoading(false)
  }
  fetchData()
}, [pathname])

Answer 2

您需要将setIsLoading 放入fetchData 函数中： 并将pathname 添加到useEffect 依赖项并检查pathname 是否具有价值：

const fetchData = async () => {
  setIsLoading(true);
  let res = await axios.get(`http://localhost:4000/posts/${pathname}`);
  const postData = res.data;
  setPost(postData);
  setIsLoading(false);
};

useEffect(() => {
  if (pathname) {
    fetchData();
  }
}, [pathname]);

EDIT: 所以这是你需要做的：

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

const PostPage = ({ post, setPost, isLoading, setIsLoading }) => {
  const { id } = useParams();

  const fetchData = async () => {
    setIsLoading(true);
    let res = await axios.get(`http://localhost:4000/posts/${id}`);
    const postData = res.data;
    setPost(postData);
    setIsLoading(false);
  };

  useEffect(() => {
    if (id) {
      fetchData();
    }
  }, [id]);

  return (
    <>
      {!isLoading && (
        <div>
          <h1>{post.title}</h1>
          <p>{post.text}</p>
        </div>
      )}
    </>
  );
};