Maison > Questions et réponses > le corps du texte
Comment saisir des accessoires dans React TypeScript ? J'obtiens l'erreur La propriété 'auteurs' n'existe pas sur le type '[Props] & {children?: ReactNode;'}'.ts. Je m'attends à recevoir un tableau composé de clés de nom et de mot de passe.
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 ( ... ) }
, même si je transmets des accessoires.
P粉5503233382024-04-01 15:15:04
Vous définissez l'interface IUser en utilisant le type IUser et définissez le nom, le statut du mot de passe, cela posera des problèmes car lorsque vous définissez ceci :
const [name, setName] = useState(""); // name will expected to be name = { name: 'name', password: 'password' }
C'est faux car le nom et le mot de passe sont une chaîne, alors essayez de les définir comme ceci :
const [name, setName] = useState(""); const [password, setPassword] = useState ("");
Ensuite, vous devez corriger le passage de l'auteur au composant FC :
const Login: FC// instead of <[Props]>
Une dernière chose que vous devez corriger ce type pour qu'il corresponde au type de données transmis depuis 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 );
Et vous le transmettez depuis l'application comme ceci :
const Authors = [ { id: "001", author_name: "John Smith", // not a name password: "123" } ];
P粉9030525562024-04-01 12:59:05
Essayez de changer [Props]
更改为 Props
comme indiqué ci-dessous
const Login: FC= ({ authors }) => { ... }
Maintenant, cela fonctionne car cela nécessite un objet au lieu d'un tableau, nous allons passer un objet comme <Loginauthors={authors} />
. Désormais, l'auteur sera un tableau d'objets.