web-dev-qa-db-fra.com

La propriété 'XYZ' n'existe pas sur le type 'Readonly <{children ?: ReactNode; }> & Lecture seule <{}> '

FIXE: j'ai désinstallé VScode, TypeScript et eslint globalement. Une fois que j'ai réinstallé VScode, tout fonctionnait à nouveau comme par magie.

MISE À JOUR: Après avoir installé la bibliothèque @ types/react, I obtient toujours une erreur similaire uniquement pour RecipeList.js et Recipe.js comme mentionné dans La propriété 'props' n'existe pas sur le type 'Home' ou La propriété TypeScript 'props n'existe pas :

La propriété 'recipes' n'existe pas sur le type 'Readonly <{children ?: ReactNode; }> & Lecture seule <{}> '.

![Similar error after installing @types/react library

ORIGINAL: Je suis donc nouveau dans React et pour une raison quelconque sur VSCode, j'obtiens une erreur de syntaxe lorsque j'essaie d'accéder à .props pour les deux RecipeList.js et Recipe.js.

Voici un exemple de code pour Recipe.js:

import React, {Component} from 'react';
import "./Recipe.css";

class Recipe extends Component {

    // props: any; uncommenting this will fix the bug

    render() {
        // don't have to use return and parentheses for arrow with JSX
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                <div className="recipe-card-img">
                    <img src={img} alt={title}/>
                </div>
                <div className="recipe-card-content">
                    <h3 className="recipe-title">
                        {title}
                    </h3>
                    <h4>
                        Ingredients:
                    </h4>
                    <ul>
                        {ingredients}
                    </ul>
                    <h4>
                        Instructions:
                    </h4>
                    <p>
                        {instructions}
                    </p>
                </div>
            </div>
        )
    }
}

Capture d'écran de l'erreur .props

Cependant, le projet ne génère aucune erreur au moment de la compilation et le site Web fonctionne parfaitement bien.

Capture d'écran de l'application qui fonctionne correctement sans erreur de console ou de terminal chrome

Je pense que cela a moins à voir avec mon code et plus encore avec TypeScript ou une sorte de configuration prédéfinie avec Javascript pour VScode ayant du mal à identifier la propriété .props pour chaque composant parce que j'ai des problèmes similaires lorsque j'ai construit le React Tutorial Project dans mon éditeur (j'ai même copié le code final index.js du site juste pour être sûr), malgré le bon fonctionnement de l'application sans erreurs de compilation.

Capture d'écran des mêmes erreurs .prop après avoir suivi le didacticiel React

La seule façon de résoudre ce problème est de coder en dur et de créer une propriété d'accessoires pour chaque classe et de la définir comme suit:

Capture d'écran de la seule solution à l'erreur de syntaxe

Toutes les idées sont appréciées! Merci beaucoup! Même si l'application fonctionne, j'ai un peu d'OCD sur cette erreur insignifiante qui apparaît dans l'éditeur.

PS: voici mes dépendances mises à jour

"dependencies": {
  "@types/react": "^16.4.13",
  "prop-types": "^15.6.2",
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-scripts": "1.1.5",
  "TypeScript": "^3.0.3"
 }
javascriptreactjstypescriptvisual-studio-codebabel
7
LoopBoi

Vous devez définir à quoi ressembleront vos accessoires et votre état à l'aide d'un interface et de l'implémentation générique de React.Component de TypeScript.

import React, {Component} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

class Recipe extends Component<IRecipeProps, IRecipeState> {
    render() {
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                Your render code here
            </div>
        )
    }
}
  • Je changerais l'extension du fichier en .tsx pour indiquer qu'il s'agit d'un fichier React en utilisant TypeScript -> Recipe.tsx
  • Veuillez ajuster les types (chaînes) en fonction de vos données.
  • Utilisez IRecipeState pour définir la structure de l'état de votre composant (this.state.fooBar). Il est acceptable de le laisser vide pour l'instant, car vous ne faites pas usage de l'état.
  • Assurez-vous de faire de même pour votre autre composant qui génère une erreur (RecipeList.js)
12
klugjo