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

useRef dans map() ne fonctionne pas [Javascript - React] - Javascript/Node.js - Programmation

Marsh Posté le 01-11-2022 à 15:35:08    

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.       )

Reply

Marsh Posté le 01-11-2022 à 15:35:08   

Reply

Marsh Posté le 02-11-2022 à 23:46:49    

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
Reply

Marsh Posté le 04-11-2022 à 23:41:00    

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.

Reply

Marsh Posté le 05-11-2022 à 09:45:23    

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
Reply

Marsh Posté le 05-11-2022 à 17:13:20    

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.

Reply

Marsh Posté le 05-11-2022 à 20:57:57    

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
Reply

Marsh Posté le 05-11-2022 à 22:01:19    

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.

Reply

Marsh Posté le 06-11-2022 à 07:32:02    

atumloustic a écrit :

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.


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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed