Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1711 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Javascript - React] useRef dans map() ne fonctionne pas

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Javascript - React] useRef dans map() ne fonctionne pas

n°2430847
Profil sup​primé
Posté le 01-11-2022 à 15:35:08  answer
 

Bonjour. Problème. Encore un. Je récupère un tableau d'objets, qui est constitué des posts de ma base de données. J'itère avec map(). Je fous ça dans le render. Tout roule, sauf que, lorsqu'au onClick, je vais pour récupérer la ref de l'élément grâce à useRef() et current afin de pouvoir mettre ensuite dans ma requête fetch l'identifiant du post dans l'adresse url pour la comparaison côté back avec req.params.id lors des modifications, suppressions, likes tout ça, je tombe sur le même id, le premier ou le dernier je sais plus, mais le même. Or, dans DevTools, tous les posts sont bien référencés, côté DOM html aussi, donc je suppose que je foire un truc avec useRef(), je cherche de partout sur le net sans rien trouver.
 
Je reprécise que je suis sous React.
 
Mon code :  
 

Code :
  1. let displayPosts = dataResultPosts.map((post, i) =>
  2.           <AllPostsAndModals id={post._id} ref={refPost} key={post._id} >
  3.             <BlockAuthor>
  4.             <DivAuthor>
  5.             <PictureUserPost>
  6.             <Image src={pictureUser || ' '} alt="photo profil utilisateur"></Image>
  7.             </PictureUserPost>
  8.             <NameAuthor key={post._id}>{post.firstname} {post.lastname}</NameAuthor>
  9.             <DivIconOption><BlockIconOption><p style={{marginTop:'2px', marginRight:'2px'}}><FontAwesomeIcon icon={faEllipsis} fontSize="36px"/></p></BlockIconOption></DivIconOption>
  10.             </DivAuthor>
  11.             </BlockAuthor>
  12.             <BlockContaintPost><ParagraphContaintPost>{post.postContent}</ParagraphContaintPost></BlockContaintPost>
  13.     <Separator/>
  14.             {picturePost ? <BlockImagePost><ImagePost src={post.imageUrlPostPicture || ' '} alt="photo profil utilisateur"></ImagePost></BlockImagePost> : null}
  15.             {picturePost ? <Separator/> : null}
  16.             <BlockOptions>
  17.             <IconLikeOn><FontAwesomeIcon icon={fasThumbsUp}/><ButtonLike onClick={likeSystem}><FontAwesomeIcon icon={farThumbsUp}/></ButtonLike></IconLikeOn>
  18.             <InputLike></InputLike>
  19.             </BlockOptions>
  20.           </AllPostsAndModals>
  21.       )

mood
Publicité
Posté le 01-11-2022 à 15:35:08  profilanswer
 

n°2430927
gatsu35
Blablaté par Harko
Posté le 02-11-2022 à 23:46:49  profilanswer
 

tu ferais mieux de faire un onClick={() => { likeSystem(post._id)}}
 
on bien une methode getOnClick :  

Code :
  1. const getOnClick = (id) => ((event) => {
  2.   // do stuff on event
  3. });
  4. // et dans le jsx  
  5. onClick={getOnClick(post._id)}


 
Passer par un useref pour récupérer une ref de je ne sais quoi, ça fait un peu bricolage du dimanche.
 
Et même encore avoir un Map avec autant de HTML à l'intérieur n'a pas de sens en réact, normalement tu devrais créer un composant : PostModal qui contient tout le post et là ça serait moins le dawa.


---------------
Blablaté par Harko
n°2431186
Profil sup​primé
Posté le 04-11-2022 à 23:41:00  answer
 

Justement, le problème venait de mon impossibilité à récupérer l'id visé au onClick si tu as bien lu. Erreur de noob, l'icône du pouce up au-dessus qui chopait l'event. Le useRef, normal ai-je appris, qu'il me sortait un seul id, apparemment il se duplique pas lors des itérations. Quant à ton idée du onClick avec une valeur dedans, du bidouillage dysfonctionnel, je te retourne l'erreur console comme ça on apprend encore tous : Expected `onClick` listener to be a function, instead got a value of `object` type. Mon onClick, d'ailleurs, qui sert à envoyer des requêtes fetch pour les likes, d'où mon besoin d'attraper ces id concernés, comme c'est mentionné dans ma description du problème. Et un truc que je dois pas piger, ou bien que si, mais ma variable let displayPosts qui est mon composant que je mets ensuite dans le rendu. Je pense pas utile de faire un composant par div ou paragraphe.

n°2431196
gatsu35
Blablaté par Harko
Posté le 05-11-2022 à 09:45:23  profilanswer
 

un composant par lignes, c'est très utiles, et ça te permet de mettre moins le bordel dans les composants parents, c'est même le conseil préconisé par réact => COMPOsant composant composant
Après oui tu vas pas faire des composants de 1 ligne
 
Mais là dans ton cas :  
- tu as pleins de lignes => 1 composant
- tu pourras gérer ton composant unitairement, et donc ton gérer ton onclick tu pourras le faire sans difficulté.
 
Donc suit les conseils de quelqu'un qui connait le sujet.


---------------
Blablaté par Harko
n°2431236
Profil sup​primé
Posté le 05-11-2022 à 17:13:20  answer
 

Mouais, je vais préférer me montrer vigilant avec tes conseils, voire même indifférent, qu'à voir ton idée de la fonction, sans compter que donner un conseil avec condescendance en plus, comme si tu avais jamais appris, non, je préfère apprendre par la galère, ou sinon je prends un livre certifié sur le sujet, d'un professionnel certifié, ce que je vais peut-être faire pour les deux trois pépins que je peux rencontrer. Mon onClick lui, fonctionne à présent très bien, j'ai mentionné l'erreur d'inattention par laquelle elle provenait. Ensuite, React, de ce que j'en sais, n'est pas fait pour rendre un HTML "plus propre", mais seulement pour optimiser le code par son DOM virtuel, et le système de composants est là pour restreindre le rafraichissement de tous les éléments aux événements. Donc, oui, pour mon bouton, vu qu'il engage l'action sur mon composant post, je peux. Le reste, pas nécessaire. D'ailleurs, personne sur Stack Overflow ne m'a fait cette oiseuse réflexion depuis que j'y suis. Bref.

n°2431256
gatsu35
Blablaté par Harko
Posté le 05-11-2022 à 20:57:57  profilanswer
 

Ici tu n'es pas sur StackOverflow mais sur HFR.
Et puis je vois pas comment j'ai pu être condescendant, je t'ai juste dit la réalité de la chose.
Si un de mes dev me fait ça sur un projet, je lui demande de faire un peu plus de découpage.
 
Si tu commences à mettres 15 lignes dans un .map(), à un moment il faut découper, car tu allourdis ton composant.  
De plus si tu as plusieurs actions dans ton élément dans le map, il vaut mieux justement avoir un composant.
 
Donc maintenant si tu veux pas écouter les conseils qu'on te donne, c'est ton problème, je te laisse faire du bricolage.


---------------
Blablaté par Harko
n°2431262
Profil sup​primé
Posté le 05-11-2022 à 22:01:19  answer
 

Et alors, tu vas m'interdire les comparatifs entre SO et Hardware ? Ce site je vois les réponses des fois, beaucoup se croient trop au-dessus parce qu'ils sont plus anciens dans le game, se prennent pour des cracks comme s'ils travaillaient dans la Silicon Valley, se fantasment autorisés à répondre comme si eux étaient les rois et les autres leurs petits sujets. Tu m'as pas dit la réalité, mais ta réalité. Mon composant faudra m'expliquer techniquement en quoi il sera alourdit si je décompose mon bouton, du HTML est du HTML, ici ou là, il faut m'expliquer la différence et en valeurs techniques. Après, si tu fais taffer tes devs pour rien, et si eux veulent taffer pour rien, grand bien vous fasse à tous. Bref, on sort du contexte de la question, je te laisse avoir le dernier mot.

n°2431273
gatsu35
Blablaté par Harko
Posté le 06-11-2022 à 07:32:02  profilanswer
 


Je te parle de maintenance de ton code.
Fait ce que tu veux n'écoute personne si tu veux
Continue comme ça et tu restera au bas de l'échelle


Message édité par gatsu35 le 06-11-2022 à 07:32:29

---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Javascript - React] useRef dans map() ne fonctionne pas

 

Sujets relatifs
[Javascript - Nodejs - Mongoose] Problème Fetch PUT form-data[Divers/perdu] .cmd ou .bat ne fonctionne pas
[résolu] GCC optimisat. avec -ftree-vrp et code qui ne fonctionne plus<img src="... .php"> ne fonctionne plus dans Firefox
Exercice html, php, mysql, javascript[VBA] Test cell vide ne fonctionne plus
Mediawiki : pb avec génération de javascript dans un articleEncodage RSA Javascript Vs Java
Javascript suggestion dans textareaHTML Select et OnClick() ne fonctionne pas sur Safari
Plus de sujets relatifs à : [Javascript - React] useRef dans map() ne fonctionne pas


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR