11527 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Messages warning pénibles avec React

Bonjour,

Je me suis un peu relancé dans React...

J'ai des surlignages rouges au sujet de certaines validations de propriétés que je n'arrive pas à résorber.
Mon code fonctionne correctement mais j'ai du rouge partout dans VSCode et ça m'énerve

J'ai installé l'appli avec Vite, apparemment ça remplace create-react-app qui est devenu obsolete.

voici le fichier package.json


{
  "name": "one",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "vite": "^5.3.1"
  }
}



upload/1721119989-40948-react-prps.jpg
Modérateur
Salut,


Soit c'est un problème asynchrone, soit c'est un problème d'accès à l'attribut, soit c'est un problème de typage (comment as-tu configuré le projet lors de la creation de npm create vite@latest ?).

Est-ce qu'en destructurant, tu obtiens la même erreur ? 


import {NewsItem} from 'path/to/NewsItem' 


const NewsList = ({data})=>{
    let items = data.map(news => <NewsItem news={news} />)
    return (
        <>
            {data && items}
        </>
    )
}

export NewsList




const NewsItem = ({news}) =>{
    news.map(....)
    return ...
}

export NewsItem


Ça fait un bail que je n'utilise plus VSC. VSC, un gros bof ! Vim et/ou Pycharm (et y'a pas photo) !
Modifié par niuxe (16 Jul 2024 - 11:20)
niuxe a écrit :
Salut,


Soit c'est un problème asynchrone soit c'est un problème d'accès à l'attribut soit c'est un problème de typage.


Le code est bon.....

c'est un problème avec eslint et je ne sais pas où chercher
Modérateur
As tu essayé ceci dans le fichier .eslintrc.cjs ? 


"rules": {
  "react/prop-types": "off"
}


Tu sais, Svelte est nettement mieux ! (Ce n'est pas parce que tout le monde va dans la même boulangerie que le pain est meilleur)
- plus simple
- plus rapide (à mettre en place)
- plus performant
- plus léger

ps : les warning chez moi ne sont pas génant. Je veux dire qu'il y a un double chevron dans la list des numéros de lignes. Ça ne me cache pas le code.
Modifié par niuxe (16 Jul 2024 - 11:28)
Meilleure solution
niuxe a écrit :
Tu sais, Svelte est nettement mieux ! (Ce n'est pas parce que tout le monde va dans la même boulangerie que le pain est meilleur)

+1
niuxe a écrit :
As tu essayé ceci dans le fichier .eslintrc.cjs ? 


"rules": {
  "react/prop-types": "off"
}




Génial, tu es mon sauveur !!!
Modifié par lionel_css3 (16 Jul 2024 - 13:59)
Prévenir un modérateur
Répondre au sujet
Aller à