React初始化时能否将useState状态更新函数传入组件？

报错核心原因 #

你的代码存在两个直接触发问题的错误：

• useState的惰性初始化函数没有返回值：箭头函数用{}包裹JSX内容时，没有手动写return的话，函数执行完成会返回undefined，screenLoaded拿不到任何可渲染的节点。
• 初始化阶段存在循环引用：useState执行过程中，返回的loadScreen设置函数还没完成初始化赋值，你在初始化回调里提前引用这个还没创建的变量，会直接抛出引用错误。本质是你在生成初始state的逻辑里，依赖了这次useState执行才会产生的setter，逻辑上就形成了死循环。

修复方案 #

React官方不推荐把完整JSX元素直接存在state中，最优实现是在state里只存储当前页面的标识，渲染阶段根据标识匹配对应组件，同时传入状态切换函数，完全避开初始化的时序问题：

import { useState } from 'react';
import Home from './pages/Home';
// 引入其他需要切换的页面组件，比如About、UserCenter等

function App() {
  // 仅存储当前页面的标识，初始化默认展示Home页
  const [currentScreen, setCurrentScreen] = useState('home');

  // 配置页面标识和对应组件的映射
  const screenRenderMap = {
    home: <Home setLoadedScreen={setCurrentScreen} />,
    // 其他页面配置示例：about: <About setLoadedScreen={setCurrentScreen} />
  };

  return (
    <div className="App">
      {screenRenderMap[currentScreen]}
    </div>
  );
}

如果你坚持要把完整JSX节点存在state中（非常不推荐，会增加额外的重渲染开销、提升维护成本），可以等组件挂载完成、setter初始化结束后再给state赋值：

import { useState, useEffect } from 'react';
import Home from './pages/Home';

function App() {
  const [screenLoaded, loadScreen] = useState(null);

  // 组件首次挂载完成后，loadScreen已经完成初始化，再传入带props的组件
  useEffect(() => {
    loadScreen(<Home setLoadedScreen={loadScreen} />);
  }, []);

  return (
    <div className="App">
      {screenLoaded}
    </div>
  );
}

这种写法会触发一次额外的空内容渲染，性能和可维护性都远低于第一种存页面标识的方案。

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