React调用FilterBydescription的Render方法获取JSX返回undefined如何解决

核心错误原因 #

• FilterBydescription 是一个返回对象的函数（自定义Hook），其返回对象中的Render属性仅在函数执行后才能获取，直接访问FilterBydescription.Render访问的是函数本身的静态属性，自然返回undefined
• 即便获取到Render方法，它本身是返回JSX的函数，需要执行或者作为组件标签渲染，直接放置函数本身不会输出有效JSX

修复方案1（保留现有结构） #

在UseAdvertisementsFilters组件顶层调用FilterBydescription获取返回对象，再渲染Render输出的JSX：

const FilterBydescription = () => {
    const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')
    const Render = () => {
        return <FilterInput bind={bindFindByDescription} placeholder="Find by description" />;
    };
    return { Render };
}

export function UseAdvertisementsFilters({isLoading}){
    // 组件顶层调用自定义Hook获取返回对象
    const { Render } = FilterBydescription()
    return(
        <aside className="col-xl-3 filter_detail">
            <Row className="filter_detail__wrapper">
                <Col xs={12}>
                    <Row>
                        <Col className={"filter_detail__search"} xs={12}>
                            {/* 执行Render函数返回JSX，也可写作<Render /> */}
                            {Render()}
                        </Col>
                    </Row>
                </Col>  
            </Row>
        </aside>
    )
}

注意：FilterBydescription作为使用了React Hook的自定义函数，需要符合React Hook命名规范，建议重命名为useFilterByDescription避免ESLint校验报错。

修复方案2（更符合React规范的写法） #

直接将FilterBydescription封装为独立组件，不需要额外拆出Render方法：

// 直接封装为独立组件
const FilterBydescription = () => {
    const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')
    return <FilterInput bind={bindFindByDescription} placeholder="Find by description" />;
}

export function UseAdvertisementsFilters({isLoading}){
    return(
        <aside className="col-xl-3 filter_detail">
            <Row className="filter_detail__wrapper">
                <Col xs={12}>
                    <Row>
                        <Col className={"filter_detail__search"} xs={12}>
                            {/* 直接作为组件标签调用 */}
                            <FilterBydescription />
                        </Col>
                    </Row>
                </Col>  
            </Row>
        </aside>
    )
}

内容的提问来源于stack exchange，提问作者Cooler-cpu