React组件传递函数作为Prop报错：handleAddNote不是函数

排查与修复步骤 #

1. 校验组件导入导出链路 #

确认所有组件的export default和import路径完全匹配：

• 检查NotesList、AddNote等组件的导入路径，确保大小写、文件夹层级无拼写错误
• 确认没有导出/导入错误的组件文件（比如重名文件导致的混淆）

2. 验证函数Prop的传递完整性 #

在每个接收handleAddNote的组件中添加日志，定位问题环节：

• 在NotesList.js中添加日志：

const NotesList = ({ notes, handleAddNote }) => {
    console.log("NotesList 接收的handleAddNote类型:", typeof handleAddNote); // 正常应输出function
    return (
        <div className="notes-list">
            {notes.map((note)=><Note id={note.id} text={note.text} date={note.date}/>)}
            <AddNote handleAddNote={handleAddNote}/>
        </div>
    );
}

• 在AddNote.js中添加日志：

const AddNote = ({ handleAddNote }) => {
    console.log("AddNote 接收的handleAddNote类型:", typeof handleAddNote); // 正常应输出function
    // 其余代码保持不变
}

如果某环节输出不是function，说明该环节的Prop传递存在错误，检查父组件的传参逻辑。

3. 清除开发环境缓存 #

React热重载可能导致缓存问题，尝试以下操作：

• 强制刷新浏览器（Ctrl+Shift+R）
• 重启React开发服务器
• 删除node_modules和package-lock.json，重新执行npm install

4. 可选：添加Prop类型校验 #

使用prop-types库强制校验Prop类型，提前发现错误：
先安装依赖：

npm install prop-types

然后在组件中添加校验：

// NotesList.js
import PropTypes from 'prop-types';
const NotesList = ({ notes, handleAddNote }) => { /* 组件逻辑 */ }
NotesList.propTypes = {
    notes: PropTypes.array.isRequired,
    handleAddNote: PropTypes.func.isRequired
};

// AddNote.js
import PropTypes from 'prop-types';
const AddNote = ({ handleAddNote }) => { /* 组件逻辑 */ }
AddNote.propTypes = {
    handleAddNote: PropTypes.func.isRequired
};

额外小问题修正 #

注意Note.js中的类名拼写错误：className='delete=icon'应改为className='delete-icon'，避免样式渲染异常。

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