ReactJS如何正确渲染函数返回的stateHook结果及相关报错处理

错误原因 #

报错的核心是你直接将函数本身作为React子元素传入了渲染流程，React不支持把函数作为可渲染节点，同时你将包含块级元素的GetCount放在<h2>标签内也不符合HTML语义规范，共同导致了页面无法正常渲染。

推荐修复方案（最优解） #

将GetCount作为独立React组件调用，逻辑解耦更符合React开发规范，同时优化useEffect的依赖项避免无意义重复执行：

import React, {useState,useEffect} from 'react';
import {DashboardLayout} from '../components/Layout';

// 将计数器组件移到外层单独定义
function GetCount() {
    const [count, setCount] = useState(0);

    // 补充依赖数组，仅count变化时更新页面标题
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

const ProjectsPage = () => {
    return (
        <DashboardLayout>
            <h2>Projects Page</h2>
            {/* 用组件标签形式调用，传入React可识别的JSX节点 */}
            <GetCount />
        </DashboardLayout>
    )
}

export default ProjectsPage;

临时修复方案（不推荐） #

如果你不想抽离组件，也可以直接执行GetCount函数拿到返回的JSX节点，仅需修改渲染部分代码：

return (
    <DashboardLayout>
        <h2>Projects Page</h2>
        {/* 加括号执行函数，直接获取返回的JSX */}
        {GetCount()}
    </DashboardLayout>
)

该写法下计数器的hooks会挂载在父组件ProjectsPage的hooks链表上，逻辑复杂时容易出现闭包问题，仅适合临时调试使用。

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