React子组件向父组件传值报props.onSaveExpenseData is not a function错误

问题根因 #

这个报错代表子组件执行传值逻辑时，props.onSaveExpenseData不是可执行的函数类型，结合你贴的代码，有两个核心问题直接触发报错：

1. 父组件命名不符合React规则：自定义组件必须首字母大写，你定义的newExpense首字母小写，React会将其识别为原生DOM标签而非自定义组件，内部的props传递逻辑完全不生效，子组件拿不到对应的方法prop。
2. 子组件传值时机错误：你把props.onSaveExpenseData(expenseData)直接写在了组件函数的顶层作用域，组件每次渲染都会无条件执行这段逻辑，既会在表单数据还没填写时就触发传值，也可能在组件初始化、重渲染的props未就绪阶段触发调用。

另外还有两个高频触发场景需要排查：

• 项目中其他位置复用ExpenseForm组件时，漏传了onSaveExpenseData属性
• ExpenseForm组件的导入/导出不匹配，导致组件渲染异常，props丢失

修复方案 #

1. 修正父组件写法 #

首先把父组件名改为大写开头，确保React能正确识别为自定义组件，处理函数保持在组件顶层作用域即可：

// 自定义组件首字母必须大写
const NewExpense = () => {
  const saveExpenseHandler = (enteredExpenseData) => {
    console.log(enteredExpenseData);
    // 这里写你接收数据后的后续逻辑
  };

  return (
    <div className="newExpense"> 
      <ExpenseForm onSaveExpenseData={saveExpenseHandler} />   
    </div>
  )
};

// 渲染父组件时也要用大写标签
// <NewExpense />

2. 修正子组件传值时机 #

不要在组件顶层直接调用传值方法，把数据组装、传值的逻辑放到表单提交的事件回调中，等用户完成输入触发提交时再执行，同时补全表单状态绑定的基础逻辑：

import { useState } from 'react';

const ExpenseForm = (props) => {
  // 绑定表单输入的状态
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  // 表单提交事件回调
  const submitHandler = (e) => {
    e.preventDefault(); // 阻止表单默认刷新行为
    const expenseData = {
      title: enteredTitle,
      amount: +enteredAmount, // 转为数字类型
      date: new Date(enteredDate)
    };
    // 触发传值，加可选链做防御，避免漏传prop时报错
    props.onSaveExpenseData?.(expenseData);
    // 提交后清空表单
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

  return (
    <form onSubmit={submitHandler}>
      {/* 省略表单输入项，记得给每个input绑定onChange更新对应状态 */}
      <button type="submit">保存支出</button>
    </form>
  )
};

export default ExpenseForm;

3. 额外检查项 #

• 全局搜索<ExpenseForm，确认所有渲染该组件的位置都传入了onSaveExpenseData属性
• 检查ExpenseForm的导入语句和导出语句匹配：如果是export default ExpenseForm就用import ExpenseForm from './组件路径'导入，如果是命名导出export const ExpenseForm就用import { ExpenseForm } from './组件路径'导入，导入错误会导致组件实例异常，props无法正常传递。

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