反应。错误：元素类型无效：应为字符串或类/函数，但得到：对象

Question

我对 react/js 很陌生，所以我希望我在这里完全不正确地使用 useEffect，但是如果有人指出我正确的方向，那就太好了:)

我尝试编写的代码是根据用户登录时选择的角色将元素设置为名为 HomeScreen 的常量。

function WorkflowTemplate({ Logout }) {
const user = useContext(userContext);

const [HomeScreen, setHomeScreen] = useState();

useEffect(() => {
    console.log("starting useEffect role select");
    switch (user.role) {
        case "Chemistry":
            return setHomeScreen(<WFChemistry />), console.log(HomeScreen);
        case "Micro":
            return setHomeScreen(<WFMicro />), console.log(HomeScreen);
        case "Manager":
            return setHomeScreen(<WFManager />);
        case "Sample admin":
            return setHomeScreen(<WFSampleAdmin />);
        case "Developer":
            return setHomeScreen(<WFDev />);
        default:
            console.log("error with role select");
    }
});

上面的代码返回错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

检查 Router.Consumer 的渲染方法。

然而，在尝试实现 useEffect 之前，我有

function WorkflowTemplate({ Logout }) {
const user = useContext(userContext);
const HomeScreen = () => {
    console.log("running HomeScreen function");
    switch (user.role) {
        case "Chemistry":
            return <WFChemistry />;
        case "Micro":
            return <WFMicro />;
        case "Manager":
            return <WFManager />;
        case "Sample admin":
            return <WFSampleAdmin />;
        case "Developer":
            return <WFDev />;
        default:
            return console.log("error with role switch");
    }
} 

这很好用，期望每次渲染组件时都会调用它，这是不受欢迎的。

我的 useEffect 函数做错了什么？

先谢谢你，

格雷格

Answer 1

尝试为您的状态添加一个初始值（例如：null），例如：const [HomeScreen, setHomeScreen] = useState(null)

如果您不想每次都渲染组件，则可以在 useEffect 中传递一个空数组，这意味着只渲染一次：

useEffect(() => {
    console.log("starting useEffect role select");
    switch (user.role) {
        case "Chemistry":
            return setHomeScreen(<WFChemistry />), console.log(HomeScreen);
        case "Micro":
            return setHomeScreen(<WFMicro />), console.log(HomeScreen);
        case "Manager":
            return setHomeScreen(<WFManager />);
        case "Sample admin":
            return setHomeScreen(<WFSampleAdmin />);
        case "Developer":
            return setHomeScreen(<WFDev />);
        default:
            console.log("error with role select");
    }
}, []);

Answer 2

Component 对比 <Component/>

组件本身与调用它返回的 JSX 元素之间存在差异 <Component/> 在您的第一个代码中，您的 HomeScreen 变量的值是一个 JSX 元素，因此您不要不需要再次调用它。你只需要渲染它，就像这样：

<SomeParent>
   {HomeScreen}
</SomeParent>

当您尝试将其调用为 <HomeScreen/> 时，您将收到您发布的错误。

在您的第二个示例中，HomeScreen 是一个函数，因此可以调用 <HomeScreen/>。您本质上是在您的组件中创建一个功能组件。你说得对，这对性能不利。

你的 useEffect 并没有好到哪里去，因为它没有依赖关系，所以它会在每次渲染时重新运行。它应该取决于 user.role。