引用 page.tsx 中的组件时，类型“{}”缺少类型中的以下属性

Question

我有一个表单“Userform”，在 page.tsx (next.js) 中，它引用了用户表单。但是在 page.tsx 中，它显示错误 -

类型“{}”缺少类型“UserFormProps”中的以下属性：dispatch、dataToEdit、toggleModalts(2739)

页面.tsx

export default async function Home() { 
  return (    
    <div>      
      <UserForm/>
)}

用户表单.tsx

 interface UserFormProps{
  dispatch: React.Dispatch<Action>;
  dataToEdit: Contact | undefined;
  toggleModal: () => void; 
}
const UserForm: FC<UserFormProps> = ({
  dispatch,
  dataToEdit,
  toggleModal
}) => {
  .....
    }
  };
  return (
    <form onSubmit={handleOnSubmit} className='contact-form'>
      {errorMsg && <p className='errorMsg'>{errorMsg}</p>}
      <FormControl fullWidth margin="normal">
        <InputLabel  htmlFor="firstName">First Name</InputLabel >
        <TextField
          className='firstName'
          name='firstName'
          value={contact.firstName}
          type='text'
          onChange={handleOnChange}
        />
      </FormControl >
      <FormControl fullWidth margin="normal">
      <InputLabel htmlFor="lastName">Last Name</InputLabel>
        <TextField
          className='lastName'
          name='lastName'
          value={contact.lastName}
          type='text'
          onChange={handleOnChange}
        />
      </FormControl>
      <FormControl fullWidth margin="normal">
      <InputLabel htmlFor="phone">Phone</InputLabel>
        <TextField
          className='phone'
          name='phone'
          value={contact.phone}
          type='number'
          onChange={handleOnChange}
        /> 
      </FormControl>
      {/* <Form.Group controlId='submit'> */}
        <Button variant="contained" type='submit' className='submit-btn'>
          {dataToEdit ? 'Update Contact' : 'Add Contact'}
        </Button>
      {/* </Form.Group> */}
    </form>
  );
};
export default UserForm;

Answer 1

错误消息表明，在您的 Page.tsx 文件中，使用

UserForm

组件时，

UserForm

期望的 props 未正确传递。具体来说，Page.tsx 似乎没有向

dispatch

提供所需的道具（

dataToEdit

、

toggleModal

、

UserForm

）。

在Page.tsx中，使用时需要向

UserForm

提供这些props。

确保这些道具在导入它们时正确定义。