reactjs 如何在第一次渲染时使用“useLayoutEffect”或“useEffect”给予“状态”？

iyr7buue 于 2023-01-17 发布在 React

关注(0)|答案(2)|浏览(165)

- 我想在第一次渲染之前执行"useLayoutEffect"中的"fetchPostData"和"setPost"。**

function PostViewPage() {
  const { postId } = useParams();
  const [post, setPost] = useState({});
  const fetchPostData = async () => {
    const postRawData = await callPostUrl(postId);
    return postRawData.data;
  };

  useLayoutEffect(() => {
    fetchPostData().then((res) => {
      setPost(res);
    });
  }, []);

  return (
    <Wrapper>
      <PageHeader
        pageTitle="게시글"
        rightButton={<img src={Menu} alt="img" />}
      />
      <ViewCard key={postId} type={"full"} post={post} postId={postId} />
    </Wrapper>
  );
}

我读到过useLayoutEffect是在布局之前执行的，这与useEffect不同，但名为"post"的状态（由"setPost"更改）在第二次渲染时仍然会更改。
这个问题是因为我想把"post"作为 prop 给名为"ViewCard"的组件。ViewCard使用"~. map "函数使用" post "。因为在第一次渲染时没有给" post "任何东西，" ViewCard "返回错误。
无法读取未定义的属性（正在读取"map"）
，这意味着"post"中没有数据。
由于第一次渲染中的错误，未执行第二次渲染。
我觉得post应该在组件返回的时候修改，我的意思是，post不是应该在第一次渲染的时候修改吗？
当我读到这篇文章时，我认为"setPost"正在进行重新渲染。https://jsramblings.com/are-you-logging-the-state-immediately-after-updating-it-heres-why-that-doesnt-work/
那么我如何在第一次渲染时给组件状态呢？请帮助我.
谢谢你。

reactjs

来源：https://stackoverflow.com/questions/75125335/how-can-i-give-state-in-first-render-using-uselayouteffect-or-useeffect

2条答案

按热度按时间

xv8emn3q1#

一种解决方案是检查：

if (JSON.stringify(post) === '{}') {
return <div> Loading... </div>
} else {
return  (
<Wrapper>
  <PageHeader
    pageTitle="게시글"
    rightButton={<img src={Menu} alt="img" />}
  />
  <ViewCard key={postId} type={"full"} post={post} postId={postId} />
</Wrapper>)
}

在第一次渲染之前可以调用的仅有的两个方法是constructor()和getDerivedStateFromProps()
在此处了解有关Reacting组件生命周期详细信息

赞(0）回复(0）举报 2023-01-17

cgh8pdjw2#

因此，即使“useLayoutEffect在布局之前执行，不像useEffect"，您也是在执行API请求。这需要时间。当您的请求挂起时，代码中没有任何内容可以阻止视图的呈现。
您可以在这里做的是在post状态中没有任何内容时停止呈现视图。

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

useEffect(... your api request logic here and setPost(...) the response, [...])

if (!post) return null

return (...view)

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 如何在第一次渲染时使用“useLayoutEffect”或“useEffect”给予“状态”？

2条答案

相关问题

热门标签

最新问答