React状态Hook内的对象数组元素无法渲染，console.log可正常输出

核心故障定位 #

最直接的原因是章节列表的map回调没有向React返回可渲染的JSX元素，这就是控制台能正常打印日志、但页面无内容的本质原因。
你当前的渲染逻辑写法：

{blog_state.section.map(item => {
    {console.log(item.paragraph)}
    <p>{item.paragraph}</p>
})}

这里的箭头函数通过{}开辟了独立函数作用域，但没有显式通过return返回需要渲染的<p>节点；反而把console.log和JSX代码额外嵌套了一层{}，变成了普通的块级执行语句。遍历过程中console.log确实会正常执行打印内容，但没有任何节点被返回给map作为结果，最终map生成的数组全部由undefined组成，React自然不会在页面渲染对应段落。

其他需要修正的隐患 #

• 你之前顾虑的「嵌套状态未初始化」不是当前问题的诱因
  初始状态中你已经为嵌套字段预留了合法占位：creator是空对象、section是空数组，初次渲染时只会因为字段为空输出空白内容，不会引发“日志正常、渲染缺失”的问题。
• 状态更新逻辑存在闭包捕获问题
  useEffect的依赖数组为空[]，回调中通过...blog_state展开状态的写法，捕获的是组件首次渲染时的状态快照。虽然当前你对所有字段做了全覆盖赋值，暂时没有触发异常，但后续如果需要基于旧状态做增量修改，很容易拿到过期的状态值引发bug。
• useEffect依赖项不全
  拉取数据的逻辑中用到了blog_id路由参数，但没有把它加入依赖数组，当路由参数变化时，组件不会重新拉取对应博客的数据。

修复后的完整实现 #

// 状态拉取逻辑优化
useEffect(() => {
    Promise.all([
        fetch(`http://127.0.0.1:8000/api/blog/${blog_id}`),
        fetch(`http://127.0.0.1:8000/api/section/full/${blog_id}`)
    ])
    .then(responses => Promise.all(responses.map(res => res.json())))
    .then(([blogInfo, sectionList]) => {
        // 传入状态更新回调，避免闭包捕获过期值
        updateBlogState(prevState => ({
            ...prevState,
            heading: blogInfo.heading,
            creator: blogInfo.creator,
            created: blogInfo.created,
            section: sectionList
        }))
    })
    .catch(err => console.log(err));
}, [blog_id]); // 补充依赖项，路由参数变化时自动重新拉取

// 渲染逻辑修复
return (
    <div className="container">
        <h1>{blog_state.heading}</h1>
        {/* 用可选链读取可能为空的对象属性，避免初始状态报错 */}
        <p className="text-small text-muted">{blog_state.creator?.username}</p>
        {blog_state.section.map(item => (
            // 隐式返回JSX，补充列表必备的唯一key属性
            <p key={item.section_id}>
                {item.paragraph}
            </p>
        ))}
    </div>
)

内容的提问来源于stack exchange，提问作者Palash Singh Raghuwanshi