React中通过useState动态渲染组件报错的原因排查

你的代码存在三个核心问题，导致无法正常运行：

• 组件命名不符合React规范：React要求自定义组件的名称必须以大写字母开头。你定义的状态变量是component（小写），渲染时写<component/>，React会把它识别成原生HTML标签，而非你导入的自定义组件。要把变量名改成Component，渲染时用<Component/>。

• 直接在函数体中调用状态更新函数导致无限重渲染：你在组件函数的顶层写了if-else逻辑调用setComponent，每次组件渲染都会执行这段代码，而setComponent会触发组件重新渲染，形成无限循环。正确的做法是用useEffect监听display的变化，只有当display改变时才更新组件。

• useState初始值的冗余写法：useState(()=>{FreehandCanvas})这种惰性初始化的写法没必要，因为FreehandCanvas是组件引用，不是需要计算的复杂值，直接写useState(FreehandCanvas)即可。

修复后的代码示例：

import Navbar from "./navigation/Navbar"
import FreehandCanvas, { SaveFile } from "./conva"
import "./blackboard_style.css"
import FileSaver from "./savefile/savefile"
import { useService } from "./customMove"
import { useState, useEffect } from "react"

export default function Blackboard(){
    const {display, setDisplay} = useService();
    const [Component, setComponent] = useState(FreehandCanvas);
    
    useEffect(() => {
        if(display === "canvas"){
            setComponent(FreehandCanvas);
        } else if(display === "savefile"){
            setComponent(FileSaver);
        }
    }, [display]) // 仅当display变化时执行

    return (
        <>
            <Navbar setDisplay={setDisplay}/>
            <Component/>
        </>
    )
}

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