不能用作 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)不能用作 JSX 组件。它的返回类型“void”不是有效的 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)”

我不知道我做错了什么。

【问题讨论】：

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

标签： javascript reactjs typescript jsx tsx

【解决方案1】：

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

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

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

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

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

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

【讨论】：