React报错：Functions are not valid as a React child 问题求助

错误根源 #

你遇到的Functions are not valid as a React child错误，本质是React无法直接渲染函数引用，同时你的displayAccordionItems函数存在返回值缺失的问题：

1. 当你写{displayAccordionItems}时，你把函数本身当作了React子元素传递，而React只允许渲染合法的子元素（如JSX元素、字符串、数字、null等），函数引用不在此列，因此触发报错。
2. 当你尝试调用{displayAccordionItems()}时，原函数内部没有returnmap方法的执行结果，导致函数返回undefined，不仅渲染不出内容，若之前的错误缓存未清除，也可能持续触发报错。

修复步骤 #

方案1：修复函数返回值并正确调用 #

修改Accordion组件，确保displayAccordionItems返回map生成的JSX数组，然后在JSX中执行该函数：

function Accordion({
    displayData,
    ...otherProps
}) {
    function displayAccordionItems () {
        // 必须return map的结果，否则函数返回undefined
        return displayData.map((itm, idx) => {
            return (
                <div key={idx}>
                    <p>{itm.label}</p>
                    <p>{itm.content}</p>
                </div>
            )
        })
    }
    // 调用函数，获取返回的JSX数组进行渲染
    return <div>Hello from accordion {displayAccordionItems()}</div>;
}

export default Accordion;

方案2：直接在JSX中编写map逻辑（更简洁） #

无需单独定义函数，直接在return的JSX中执行map，减少冗余代码：

function Accordion({ displayData, ...otherProps }) {
    return (
        <div>
            Hello from accordion
            {displayData.map((itm, idx) => (
                <div key={idx}>
                    <p>{itm.label}</p>
                    <p>{itm.content}</p>
                </div>
            ))}
        </div>
    );
}

export default Accordion;

关键知识点 #

• React子元素只能是React元素、字符串、数字、布尔值（会被忽略）、null、undefined，函数引用或其他对象类型都无法直接渲染。
• 数组方法map会返回一个新数组，当数组元素是合法的JSX元素时，React可以直接渲染整个数组。

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