Maison  >  Questions et réponses  >  le corps du texte

Comment saisir des accessoires dans React TypeScript ?

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粉897881626P粉897881626224 Il y a quelques jours322

répondre à tous(2)je répondrai

  • P粉550323338

    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"
       }
     ];

    répondre
    0
  • P粉903052556

    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.

    répondre
    0
  • Annulerrépondre