React CreateStudent组件参数不匹配报错原因及解决方法

算力阿峰

2026-8-29

报错原因

React 函数组件接收参数有固定规则：所有通过 JSX 标签传入的属性，会被统一合并为单个 props 对象，作为组件函数的第一个参数传入；React 渲染组件时最多只会传入2个参数（第一个为合并后的props，第二个为forwardRef转发的ref实例）。
你当前的CreateStudent组件错误地将name、age、email、onDataChange、onCreate拆分为5个独立的函数参数声明，等于要求函数调用时传入5个独立实参，和React的传参逻辑完全不匹配，因此触发参数数量不匹配的报错。
父组件中传入5个属性的写法是符合JSX规范的，问题完全出在子组件的参数接收写法上。

修复方案

无需修改父组件传参逻辑，只需要调整CreateStudent.tsx的组件入参写法，把所有需要接收的属性统一放到第一个参数对象中解构即可。
修复后的./CreateStudent.tsx代码如下：

import React from "react";

function CreateStudent(
  // 所有属性统一在第一个props参数内解构
  { name, age, email, onDataChange, onCreate }: {
    name: string;
    age: string;
    email: string;
    onDataChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onCreate: () => void;
  }
) {
  return (
    <div>
      <input type="text" name="name" onChange={onDataChange} value={name} />
      <input type="text" name="age" onChange={onDataChange} value={age} />
      <input type="text" name="email" onChange={onDataChange} value={email} />
      <button onClick={onCreate}>Add</button>
    </div>
  );
}

export default CreateStudent;