不能用作 JSX 组件。它的返回类型“void”不是有效的 JSX element.ts(2786)

Posted 2023-03-13

【中文标题】不能用作 JSX 组件。它的返回类型“void”不是有效的 JSX element.ts(2786)

【英文标题】：cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786)

【发布时间】：2021-12-14 01:37:19

【问题描述】：

我得到了这个代码：

    function searchData(searchWord: any) 
        if (originalData.length > 0) 
            if (searchWord !== "") 
                setDataList([...originalData.filter((svc: any) => 
                removeAccent(svc.name.toLowerCase())
                .includes(removeAccent(searchWord.toLowerCase()))),]);
             else 
                setDataList([...originalData]);
            
        
    
    return (
        <div>
            <Navbar currentUser=props.currentUser setCurrentUser=props.setCurrentUser />
            <div style= paddingTop: "80px", marginBottom: "3rem", minHeight: "90vh" >
                <div className="text-center header">
                    <h1 className="title">Tu agente de reserva personal</h1>
                    <h4 className="title">Consulta servicios y agenda citas en línea</h4>
                </div>
                <Row className="justify-content-center text-center mt-5">
                    <Col xs="11" sm="8" md="7" lg="6" xl="5">
                        <h1 className="title">Nuestros prestadores de servicios. </h1>
                        <FormControl onChange=e => searchData(e.target.value)/>                  
                    </Col>
                </Row>
                <CardList data=dataList></CardList>
            </div>
            <Footer />
        </div>
    )

它返回给我这个：

"'Navbar' 不能用作 JSX 组件。"

“它的返回类型'void'不是一个有效的JSX element.ts(2786)”

我不知道我做错了什么。

【问题讨论】：

在返回之前你有一个额外的支架。

【参考方案1】：

正如 Antonio 正确指出的那样，问题在于返回 JSX 之前的备用右括号。

这相当于返回 undefined，它对于 React 来说是无效的 JSX，因此是错误消息。

要找到这些问题，最好使用 Prettier 等自动格式化程序或按需触发 Autoformat 来自动格式化您的代码。以下是在 VSCode 中执行此操作的方法：

Cmd+Shift+P (MacOS) 或 Ctrl+Shift +P 打开命令框，然后输入“格式化文档”

或者使用直接快捷键Option/Alt+Shift+F

这假设 VSCode 找到了文件的正确语言（这通常是根据文件扩展名完成的）。