React中无法向子组件传递函数，报错TypeError: chooseMessage is not a function

问题描述 #

代码语法无明显错误，但运行时抛出TypeError: chooseMessage is not a function。已查阅状态提升相关文章、教程并按规范操作，仍未解决。更新：确认代码逻辑本身完全正确，怀疑问题出在编译器/构建工具环节。

相关代码 #

父组件 #

import React, { useState } from 'react'

export default function LayoutMain(props) {
    const [message, setMessage] = useState("Hello World");

    const chooseMessage = (message) => {
        setMessage(message);
    };

    return (
        <div>
            <LayoutMenu>
                 <Navigator chooseMessage={chooseMessage} />
            </LayoutMenu>
        </div>
    )
}

子组件 #

export default function Navigator({chooseMessage}) {
    let msg = 'Goodbye';
    
    return (
        <div className='navigator-header' onClick={() => chooseMessage(msg)}>
             test
        </div>
    )
}

编译器/构建工具方向排查建议 #

• 清除项目缓存：删除node_modules/.cache目录，或执行npm cache clean --force/yarn cache clean，之后重启开发服务器
• 核对依赖版本：检查package.json中React、React-DOM的版本是否兼容，避免版本不匹配导致的异常
• 检查构建配置：确认Webpack/Vite等工具的配置是否存在代码压缩、Tree Shaking规则误删函数的情况
• 重启开发服务：完全关闭当前开发进程后重新启动，规避热更新机制带来的状态残留问题
• 验证文件导入：确认Navigator组件的导入路径无误，未导入错误的文件副本

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