Reactjs 我如何使我的文章加载只有当它已被提取

每次我打开一个新的帖子页面，上一篇帖子的数据都会在屏幕上显示几毫秒，然后新的数据就会显示出来。 我试着检查post是否正在加载，并使用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>
      )}
    </>
  )
}

constpostpage=（{post，setPost，isLoading，setIsLoading}）=>{
const location=useLocation（）
const pathname=location.pathname.split（“/”[2]
useffect（（）=>{
setIsLoading（真）
const fetchData=async（）=>{
让res=等待axios.get(`http://localhost:4000/posts/${pathname}`）
const postData=res.data
setPost（postData）
setIsLoading（错误）
}
fetchData（）
}, [])
返回(
{！正在加载&&(
{post.title}
{post.text}

)}
)
}

以下是我的路线：

<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>

{isLogged&&(
)}
{posts.slice（0.reverse（）.map（post=>(
))}

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

编辑： Post.js

constpost=（{postTitle，postText，isloged，posts，setPosts，id}）=>{
const removePost=async（id）=>{
const postArray=posts.filter（（post）=>（post.id！==id））
让res=等待axios.delete(`http://localhost:4000/posts/${id}`）
设置柱（后排列）
}
返回(

{postTitle}

{postText}

{isLogged&&(
removePost（id）}>
仅当第一次装入组件时，才会运行effect hook。如果要在每次更改
路径名时运行它，请将其添加到其依赖项数组中：

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]);


您需要将
setisload
放入
fetchData
函数中：
并将
路径名
添加到
useffect
依赖项中，同时检查
路径名
以获得值：

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>
      )}
    </>
  );
};

编辑
：
因此，以下是您需要做的：

从“react router dom”导入{useParams}；
const PostPage=（{post，setPost，isLoading，setIsLoading}）=>{
const{id}=useParams（）；
const fetchData=async（）=>{
设置加载（真）；
让res=等待axios.get(`http://localhost:4000/posts/${id}`）；
const postData=res.data；
setPost（postData）；
设置加载（假）；
};
useffect（（）=>{
如果（id）{
fetchData（）；
}
}，[id]）；
返回(
{！正在加载&&(
{post.title}
{post.text}

)}
);
};
这不起作用这不起作用work@VadimSurugiu我已经编辑了答案，但仍然不起作用：（@VadimSurugiu你的意思是什么不起作用。在这些更改之后，问题不在你的
PostPage
组件中。创建一个代码沙盒，这样我就可以看到你试图做的事情的全貌，什么不起作用？你期望发生什么？发生了什么？详细信息，详细信息。显示你的路线plzI编辑了原点邮政总局
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>
      )}
    </>
  );
};