标记 'CreateStudent' 至少需要 '5' 个参数，但 JSX 工厂'React.createElement'最多提供'2'

Question

我正在编写一个函数来获取学生的姓名、年龄和电子邮件输入并在数组中注册。

index.tsx

import React, { useState, useRef } from "react";
import Student from "./UserList";
import CreateStudent from "./CreateUser";
function StudentList() {
const [students, setStudents] = useState<any>([
{
id: "st001",
name: "김남준",
age: 28,
email: "[e-mail]",
},
]);
const nextId = useRef(2);
const [inputs, setInputs] = useState({
name: "",
age: "",
email: "",
});
const { name, age, email } = inputs;
const onDataChange = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const onCreate = () => {
const student = {
id: "st00" + nextId.current,
name,
age,
email,
};
setStudents([...students, student]);
setInputs({
name: "",
age: "",
email: "",
});
nextId.current += 1;
};
return (
<div>
<CreateStudent
name={name}
age={age}
email={email}
onDataChange={onDataChange}
onCreate={onCreate}
/>
{students.map((student: { id: React.Key | null | undefined }) => (
<Student student={student} key={student.id} />
))}
</div>
);
}
export default StudentList;

。/CreateStudent.tsx

import React from "react";
function CreateStudent(
{ name }: { name: any },
{ age }: { age: any },
{ email }: { email: any },
{ onDataChange }: { onDataChange: any },
{ onCreate }: { onCreate: any }
) {
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;

这是发生在我身上的错误的内容。

标签'CreateStudent'期望至少有'5'个参数，但是JSX工厂'React '。createElement'最多提供'2'。

1. name ={名称}
年龄
2. ={时代}
3. 邮件= {email}
4. onDataChange = {onDataChange}
5. onCreate = {onCreate}

我实际上使用了这五个参数

为什么这里出现错误，我如何解决它们?

Answer 1

CreateStudent是一个反应功能组件，在大多数情况下，它应该只接受一个props参数。在您的示例中，您应该将props解构为5个键代替5个参数.

interface CreateStudentProps {
name: any;
age: any;
email: any;
onDataChange: any;
onCreate: any;
}
function CreateStudent({
name,
age,
email,
onDataChange,
onCreate
}: CreateStudentProps) {
...your code here
}