React中条件渲染为何能解决setState异步引发的初始状态为空问题？

我正在开发一个博客项目，调用API获取mainBlog和relatedBlogs状态。将mainBlog传入Post组件时，页面刷新会因mainBlog初始状态为null报错，但非刷新的重新渲染时正常，推测是setState异步更新延迟。添加如下条件渲染后问题解决：

mainBlog && (
    <div>
        <Post post={mainBlog} />
        <h2 className='py-4 text-3xl font-bold'>Related Blogs</h2>
        <div className='flex flex-col gap-y-7'>
            {relatedBlogs.map((blog) => (
                <Post key={blog.id} post={blog} />
            ))}
        </div>
    </div>
)

我想了解：

• 为何条件渲染能解决该问题？
• 为何条件判断会在异步setState完成后执行？我原本以为它只会检查初始状态，会显示空白页。

以下是核心代码：

import { useContext, useEffect, useState } from 'react'
import BackButton from '../components/BackButton'
import Header from '../components/Header'
import { useLocation } from 'react-router-dom';
import { AppContext } from '../context/AppContext';
import Post from '../components/Post';
import Spinner from '../components/Spinner';

export default function DetailBlog() {
    const { loading, setLoading } = useContext(AppContext);
    const [mainBlog, setMainBlog] = useState(null);
    const [relatedBlogs, setRelatedBlogs] = useState([]);
    const location = useLocation();
    const blogId = location.pathname.split('/').at(-1);
    const newBaseUrl = "https://codehelp-apis.vercel.app/api/get-blog";


    async function fetchBlogData() {
        setLoading(true);
        let url = `${newBaseUrl}?blogId=${blogId}`
        try {
            const result = await fetch(url);
            const data = await result.json();
            console.log("api res");
            console.log(data);
            setMainBlog(data.blog);
            setRelatedBlogs(data.relatedBlogs);
            console.log(mainBlog);
        }
        catch (e) {
            console.log(e);
        }
        setLoading(false);
    }

    useEffect(() => {
        if (blogId) {
            fetchBlogData();
        }
    }, [location.pathname]);
    return (
        <div className="w-full h-full flex flex-col items-center justify-center gap-x-1 relative">
            {mainBlog && <Header text={`${blogId} - ${mainBlog.title}`} />}
            <div className='max-w-[620px] w-11/12 py-3 flex flex-col gap-y-7 my-[70px]'>
                {loading ? (
                    <Spinner />
                ) : mainBlog && (
                    <div>
                        <Post post={mainBlog} />
                        <h2 className='py-4 text-3xl font-bold'>Related Blogs</h2>
                        <div className='flex flex-col gap-y-7'>
                            {relatedBlogs.map((blog) => (
                                <Post key={blog.id} post={blog} />
                            ))}
                        </div>
                    </div>
                )}
            </div>
            <BackButton />
        </div>
    )
}

1. 条件渲染为何能解决报错问题 #

页面刷新时，组件初始化阶段mainBlog的初始值是null，如果直接把null传给Post组件，组件内部大概率会尝试访问post的属性（比如title、content），这就会触发Cannot read properties of null的错误。

添加mainBlog && (...)的条件判断后，当mainBlog为null时，逻辑与运算会直接返回null，不会渲染后续的Post组件及相关内容，从根源上避免了把null传入组件导致的报错。

2. 条件判断为何会在异步setState完成后执行 #

React的核心机制是状态更新触发组件重新渲染：

• 组件初始化时，mainBlog是null，此时条件判断不成立，不会渲染对应内容；
• useEffect在组件挂载后（或location.pathname变化时）调用fetchBlogData，API请求完成后调用setMainBlog(data.blog)更新状态；
• 一旦setMainBlog执行，React会标记组件需要重新渲染，待状态更新完成后，组件会重新执行render函数（也就是你写的return部分）；
• 重新渲染时，mainBlog已经是API返回的有效对象，条件判断mainBlog && (...)成立，对应的内容就会被渲染出来。

你之前以为只会检查初始状态，是忽略了React状态更新会触发重新渲染的机制——组件不是只渲染一次，每次状态变化都会重新执行渲染逻辑，条件判断也会随之重新计算。

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