React将函数式组件存储在useState中出现报错的原因是什么？

React的useState setter存在内置的函数式更新逻辑：当你给setter传入一个函数类型的参数时，React会自动将它识别为更新器函数，会立即执行该函数，并把当前的最新state值作为入参传入，函数的返回值才会被作为新的state存储。
你最初的写法setComponent(Bold)中，Bold本身是函数类型，触发了上述逻辑：React直接调用了Bold()，没有传入任何props参数，导致Bold组件接收的props是undefined，解构text属性时就抛出了第一个错误。
执行Bold()返回的是JSX元素（<b>...</b>节点），不是组件类型，所以后续你尝试用<Component />渲染的时候，React发现传入的组件类型不是合法的函数/类/内置标签字符串，就抛出了第二个类型错误。

你改成setComponent(() => Bold)后，外层的箭头函数才是被React识别的更新器函数：React执行该箭头函数后返回Bold组件本身，这时候state中存储的就是合法的组件函数，后续渲染自然可以正常运行。

更符合常规开发习惯的写法是不在state中直接存储组件函数，而是存储类型标识，避免踩到setter函数的特殊处理逻辑：

import { useState } from 'react';

const Bold = ({ text }) => <b>{text}</b>;
const Italic = ({ text }) => <i>{text}</i>;

export default function App() {
  const [type, setType] = useState();

  return (
    <>
      <button onClick={() => setType('bold')}>Bold</button>
      <button onClick={() => setType('italic')}>Italic</button>
      {type === 'bold' && <Bold text="I love 🧀 more than life!" />}
      {type === 'italic' && <Italic text="I love 🧀 more than life!" />}
    </>
  );
}

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