Bagaimana untuk memasukkan prop dalam skrip taip reaksi?

Question

Bagaimana untuk memasukkan prop dalam React TypeScript? Saya mendapat ralat Harta 'pengarang' tidak wujud pada jenis '[Props] & {children?: ReactNode;'}'.ts. Saya menjangkakan akan diluluskan tatasusunan yang terdiri daripada kekunci nama dan kata laluan.

https://codesandbox.io/s/test-login-page-tasks-24-04-forked-eg91s5?file=/src/components/Login.tsx:229-274

type Props = {
  authors: {
    name: string;
    password: string;
  }[];
};

const Login: FC<[Props]> = ({ authors }) => {
  return (
  ...
  )
}

, walaupun saya menyampaikan prop.

Answer 1

Anda tentukan antara muka IUser menggunakan jenis IUser dan tentukan nama, status kata laluan, ini akan menyebabkan masalah kerana apabila anda mentakrifkan ini:

const [name, setName] = useState("");
// name will expected to be 
name = {
    name: 'name',
    password: 'password'
}

Ini salah kerana nama, kata laluan ialah rentetan, jadi cuba takrifkannya seperti ini:

const [name, setName] = useState("");
const [password, setPassword] = useState("");

Kemudian anda perlu membetulkan penghantaran pengarang kepada komponen FC:

const Login: FC // instead of <[Props]>

Satu perkara terakhir anda perlu membetulkan jenis ini agar sepadan dengan jenis data yang diluluskan daripada App.tsx:

type Props = {
    authors: {
       author_name: string; // instead of name
       password: string;
    }[];
};


// because you are passing and comparing here with author_name not with name

const userData = authors.find(
  (user) => user.author_name === name && user.password === password
);

Dan anda menyampaikannya dari apl seperti ini:

const Authors = [
   {
      id: "001",
      author_name: "John Smith", // not a name
      password: "123"
   }
 ];

Answer 2

Cuba tukar [Props] 更改为 Props seperti gambar di bawah

const Login: FC = ({ authors }) => { ... }

Sekarang ia berfungsi kerana ia memerlukan objek dan bukannya tatasusunan, kita akan lulus objek seperti <Loginauthors={authors} /> . Sekarang, pengarang akan menjadi pelbagai objek.