如何在首次渲染时通过useLayoutEffect/useEffect为组件赋予state？

我希望在首次渲染前执行useLayoutEffect内的fetchPostData和setPost方法。现有PostViewPage组件代码如下：

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状态仍需等到二次渲染才会更新。由于首次渲染时post为空对象，ViewCard组件调用map方法时报错“Cannot read properties of undefined (reading 'map')”，导致二次渲染无法执行。我想知道如何在首次渲染时就为组件提供有效的state？

不管是useLayoutEffect还是useEffect，都没办法在首次渲染前完成状态更新——React的渲染流程是先执行组件函数生成JSX，再处理副作用。核心思路是避免首次渲染时因空状态触发报错，同时等待数据加载完成后再渲染依赖数据的组件，或者给状态设置合理的初始值。

方法1：给post设置匹配数据结构的初始值 #

如果ViewCard需要post里某个数组字段（比如comments、tags）来执行map，可以在useState初始化时给对应字段设置空数组，确保首次渲染时该字段存在：

// 假设post需要包含comments数组，初始值就带上空数组
const [post, setPost] = useState({ comments: [], tags: [] });

这样即使数据还没加载，ViewCard里的post.comments.map(...)也能正常执行，不会报错。

方法2：加载完成前渲染占位/加载态 #

在数据未加载完成时，不渲染ViewCard，而是显示加载提示或者占位组件：

function PostViewPage() {
  const { postId } = useParams();
  const [post, setPost] = useState(null); // 初始值设为null，标记未加载
  const [loading, setLoading] = useState(true);
  const fetchPostData = async () => {
    try {
      const postRawData = await callPostUrl(postId);
      setPost(postRawData.data);
    } finally {
      setLoading(false);
    }
  };

  useLayoutEffect(() => {
    fetchPostData();
  }, [postId]); // 依赖postId，确保参数变化时重新请求

  if (loading) {
    return <div>加载中...</div>; // 或者自定义加载组件
  }

  // 确保post存在后再渲染ViewCard
  if (!post) {
    return <div>暂无数据</div>;
  }

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

方法3：在ViewCard内部做空值保护 #

修改ViewCard组件，在使用post的字段前先判断是否存在，或者使用可选链操作符：

// 在ViewCard组件内部
// 原本的错误写法：post.comments.map(...)
// 修改为：
(post.comments || []).map(...)
// 或者用可选链+空值合并：
post.comments?.map(...) ?? []

这样即使post是空对象，也不会触发map的报错，组件能正常完成首次渲染，等数据加载完成后二次渲染显示正确内容。

内容的提问来源于stack exchange，提问作者booya