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

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [React] Comment changer le state de manière unique dans une map

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[React] Comment changer le state de manière unique dans une map

n°2431187
atumlousti​c
Posté le 04-11-2022 à 23:55:26  profilanswer
 

Là je serre. Lorsque j’essaie de récupérer, lors du chargement de la page, dans le tableau d'objets de mes posts, tous les tableaux référençant les utilisateurs qui ont aimé tel ou tel post, ce afin de les parcourir pour que je fasse avec ces id les comparaisons avec l'id de l'utilisateur connecté, ainsi pour l'UI et que ma requête fetch des likes ne soit pas déstabilisée, que je change donc à cette suite le state, ce sont les state de tous les posts qui changent, de manière générale sans différence. Si une seule publication est aimée par l’utilisateur, au rechargement de la page, toutes les publications sont marquées comme aimées. Et si je poste un nouveau post, tous les autres sont marqués comme non aimés. J'ai testé les composants fonctionnels, les composants de class, useContext même si ce dernier je savais bien qu'il allait rien changé, mais voilà, je ne parviens pas.
 
Mon code :  
 

Code :
  1. /*Autre tableau comparatif test*/
  2.     // let newArray = [];
  3.     // function findDataResult(el, idx, arr) {
  4.    
  5.     //   let userId = el.find((id) => id === dataResult.infos._id);
  6.     //   if (userId) {
  7.     //     toggleLike('likeUp')
  8.     //     //setTest(true);
  9.     //     // console.log('yes');
  10.     //   } else if (!userId) {
  11.     //     toggleLike('likeNone')
  12.     //     //setTest(false);
  13.     //     // console.log('no');
  14.     //   }
  15.     // //   console.log(test)
  16.      
  17.     // }
  18.     // useEffect(() => {
  19.     //  if (!isDataLoading) {
  20.     //     dataResultPosts.forEach((likeArr) => newArray.push(likeArr.usersLiked));
  21.     //     newArray.forEach(findDataResult);
  22.     //   }
  23.     // },[isDataLoading]);
  24.     // console.log(likeState.like)
  25. /*Fonction pour requête fetch au onClick (fonctionne)*/
  26.     const likeSystem = async (e) => {
  27.         // console.log(e.target.id)
  28.         // let inputLike = document.querySelector('#likeInput')
  29.         // inputLike.value = parseInt(inputLike.value) + 1
  30.         // let iconLikeOn = document.querySelector('#iconLikeOn')
  31.         // iconLikeOn.classList.add('iconLikeOn')
  32.         // if (likeUser === 0) {
  33.         //     setLikeUser(1)
  34.         // }
  35.         // // if (likeUser === 1) {
  36.         // //     setLikeUser(0)
  37.         // // }
  38.         let idUrl = e.target.id
  39.         if (likeUser === 0) {
  40.             try {
  41.                 const response = await fetch(
  42.                     'http://localhost:4200/api/ficheUser/post/like/' + idUrl,
  43.                     {
  44.                         method: 'POST',
  45.                         headers: {
  46.                             'Content-Type': 'application/json',
  47.                             Authorization: `Bearer ${authContext.token}`,
  48.                         },
  49.                         body: JSON.stringify({
  50.                             userId: authContext.userId,
  51.                             likes: 1,
  52.                         }),
  53.                     }
  54.                 )
  55.                 const dataResponse = await response.json()
  56.                 if (response.ok) {
  57.                     setLikeUser(1)
  58.                 }
  59.             } catch (err) {
  60.                 console.log(err)
  61.             }
  62.         }
  63.         if (likeUser === 1) {
  64.             try {
  65.                 const response = await fetch(
  66.                     'http://localhost:4200/api/ficheUser/post/like/' + idUrl,
  67.                     {
  68.                         method: 'POST',
  69.                         headers: {
  70.                             'Content-Type': 'application/json',
  71.                             Authorization: `Bearer ${authContext.token}`,
  72.                         },
  73.                         body: JSON.stringify({
  74.                             userId: authContext.userId,
  75.                             likes: 0,
  76.                         }),
  77.                     }
  78.                 )
  79.                 const dataResponse = await response.json()
  80.                 if (response.ok) {
  81.                     setLikeUser(0)
  82.                 }
  83.             } catch (err) {
  84.                 console.log(err)
  85.             }
  86.         }
  87.     }
  88. /*Ici que le state se généralise*/
  89.     class PostDisplay extends React.Component {
  90.         constructor(props) {
  91.             super(props)
  92.             const { infosPosts } = this.props
  93.             const { infosUsers } = this.props
  94.             this.state = {
  95.                 liked: null,
  96.             }
  97.             this.handleChangeLike = this.handleChangeLike.bind(this)
  98.         }
  99.         handleChangeLike() {
  100.             this.props.infosPosts.forEach((array) => {
  101.                 if (array.usersLiked.length > 0) {
  102.                     for (let userId of array.usersLiked) {
  103.                         if (userId === '6361843f1b0448be3a676de3') {
  104.                             this.setState({ liked: true })
  105.                             console.log('a')
  106.                         } else if (userId !== '6361843f1b0448be3a676de3') {
  107.                             this.setState({ liked: false })
  108.                             console.log('b')
  109.                         }
  110.                     }
  111.                 }
  112.                 // else {
  113.                 //     this.setState({liked: false})
  114.                 //     console.log('c')
  115.                 // }
  116.             })
  117.         }
  118.         render() {
  119.             const { infosPosts } = this.props
  120.             const { infosUsers } = this.props
  121.             const { liked } = this.state
  122.             return infosPosts.map((posts) => (
  123.                 <div className="allPostsAndModals" key={posts._id} onLoad={this.handleChangeLike}>
  124.                     <div className="blockAuthor">
  125.                         <div className="divAuthor">
  126.                             <div className="pictureUserPost">
  127.                                 <img src="" className="imageUser"></img>
  128.                             </div>
  129.                             <div className="nameAuthor">
  130.                                 {posts.firstname} {posts.lastname}
  131.                             </div>
  132.                             <div className="divIconOptions">
  133.                                 <div className="blockIconOptions">
  134.                                     <p className="iconOption">
  135.                                         <FontAwesomeIcon
  136.                                             icon={faEllipsis}
  137.                                             fontSize="36px"
  138.                                         />
  139.                                     </p>
  140.                                 </div>
  141.                             </div>
  142.                         </div>
  143.                     </div>
  144.                     <div className="blockContentPost">
  145.                         <div className="paragraphContentPost">
  146.                             {posts.postContent} {posts.id}
  147.                         </div>
  148.                     </div>
  149.                     <div className="separator"></div>
  150.                     <div className="blockImagePost">
  151.                         <img
  152.                             className="imagePost"
  153.                             src={posts.imageUrlPostPicture || ' '}
  154.                             alt="photo profil utilisateur"
  155.                         ></img>
  156.                     </div>
  157.                     <div className="separator"></div>
  158.                     <div className="ContenairOptions">
  159.                         <div className="iconLikeOn">
  160.                             <button className="buttonLike" onClick={likeSystem()}>
  161.                                 <FontAwesomeIcon
  162.                                     id={posts._id}
  163.                                     icon={farThumbsUp}
  164.                                 />
  165.                             </button>
  166.                         </div>
  167.                         {likeState.like ? <p>Liké !test</p> : <p>Pas liké :/test</p>}
  168.                         <input
  169.                             className="inputLike"
  170.                             defaultValue={posts.likes + likeUser}
  171.                         ></input>
  172.                     </div>
  173.                 </div>
  174.             ))
  175.         }
  176.     }

mood
Publicité
Posté le 04-11-2022 à 23:55:26  profilanswer
 

n°2431188
atumlousti​c
Posté le 04-11-2022 à 23:57:31  profilanswer
 

Je précise que la comparaison est bien faite dans quelconque tableau comparatif, en console ça ressort bien sur les yes ou les no, c'est le state que je pige pas là, qui ressort soit tout à false, soit tout à true.

n°2431247
atumlousti​c
Posté le 05-11-2022 à 19:37:52  profilanswer
 

Allé, réponse pour ceux et celles qui comme moi ont pu galérer sur ça. Erreur basique en fait. J'ai juste eu à faire, avant de lancer une requête POST pour les likes sur la publication visée par son id, une requête GET, avec ce-dit id, mettre mes conditions, et au succès de chaque requête POST pour les likes, lancer une requête GET pour récupérer mon tableau d'objets des publications, et mettre ce résultat dans le state lui étant dédié. Fonctionne nickel.
 

Code :
  1. const [dataResultPosts, setDataResultPosts] = useState([])
  2.     const likeSystem = async (e) => {
  3.         // console.log(e.target.id)
  4.         // let inputLike = document.querySelector('#likeInput')
  5.         // inputLike.value = parseInt(inputLike.value) + 1
  6.         // let iconLikeOn = document.querySelector('#iconLikeOn')
  7.         // iconLikeOn.classList.add('iconLikeOn')
  8.         let idUrl = e.target.id
  9.         try {
  10.             const response = await fetch(
  11.                 'http://localhost:4200/api/ficheUser/post/one/' + idUrl,
  12.                 {
  13.                     method: 'GET',
  14.                     headers: {
  15.                         'Content-Type': 'application/json',
  16.                         Authorization: `Bearer ${authContext.token}`,
  17.                     },
  18.                 }
  19.             )
  20.             const dataResponse = await response.json()
  21.             if (response.ok && dataResponse.likes === 0) {
  22.                 console.log('a')
  23.                 try {
  24.                     const response = await fetch(
  25.                         'http://localhost:4200/api/ficheUser/post/like/' +
  26.                             idUrl,
  27.                         {
  28.                             method: 'POST',
  29.                             headers: {
  30.                                 'Content-Type': 'application/json',
  31.                                 Authorization: `Bearer ${authContext.token}`,
  32.                             },
  33.                             body: JSON.stringify({
  34.                                 userId: authContext.userId,
  35.                                 likes: 1,
  36.                             }),
  37.                         }
  38.                     )
  39.                     const dataResponse = await response.json()
  40.                     if (response.ok) {
  41.                         fetch(urlGet, {
  42.                             method: 'GET',
  43.                             headers: {
  44.                                 'Content-Type': 'application/json',
  45.                                 Authorization: `Bearer ${authContext.token}`,
  46.                             },
  47.                         })
  48.                             .then((resp) => resp.json())
  49.                             .then((data) => setDataResultPosts([...data]))
  50.                     }
  51.                 } catch (err) {
  52.                     console.log(err)
  53.                 }
  54.             } else if (response.ok && dataResponse.likes === 1) {
  55.                 console.log('b')
  56.                 try {
  57.                     const response = await fetch(
  58.                         'http://localhost:4200/api/ficheUser/post/like/' +
  59.                             idUrl,
  60.                         {
  61.                             method: 'POST',
  62.                             headers: {
  63.                                 'Content-Type': 'application/json',
  64.                                 Authorization: `Bearer ${authContext.token}`,
  65.                             },
  66.                             body: JSON.stringify({
  67.                                 userId: authContext.userId,
  68.                                 likes: 0,
  69.                             }),
  70.                         }
  71.                     )
  72.                     const dataResponse = await response.json()
  73.                     if (response.ok) {
  74.                         fetch(urlGet, {
  75.                             method: 'GET',
  76.                             headers: {
  77.                                 'Content-Type': 'application/json',
  78.                                 Authorization: `Bearer ${authContext.token}`,
  79.                             },
  80.                         })
  81.                             .then((resp) => resp.json())
  82.                             .then((data) => setDataResultPosts([...data]))
  83.                     }
  84.                 } catch (err) {
  85.                     console.log(err)
  86.                 }
  87.             }
  88.         } catch (err) {
  89.             console.log(err)
  90.         }
  91.     }
  92.    
  93.     const GetPost = ({ infosPosts, infosPostOne }) => {
  94.         return infosPosts.map((posts) => (
  95.             <div className="allPostsAndModals" key={posts._id}>
  96.                 <div className="blockAuthor">
  97.                     <div className="divAuthor">
  98.                         <div className="pictureUserPost">
  99.                             <img src="" className="imageUser"></img>
  100.                         </div>
  101.                         <div className="nameAuthor">
  102.                             {posts.firstname} {posts.lastname}
  103.                         </div>
  104.                         <div className="divIconOptions">
  105.                             <div className="blockIconOptions">
  106.                                 <p className="iconOption">
  107.                                     <FontAwesomeIcon
  108.                                         icon={faEllipsis}
  109.                                         fontSize="36px"
  110.                                     />
  111.                                 </p>
  112.                             </div>
  113.                         </div>
  114.                     </div>
  115.                 </div>
  116.                 <div className="blockContentPost">
  117.                     <div className="paragraphContentPost">
  118.                         {posts.postContent} {posts.id}
  119.                     </div>
  120.                 </div>
  121.                 <div className="separator"></div>
  122.                 <div className="blockImagePost">
  123.                     <img
  124.                         className="imagePost"
  125.                         src={posts.imageUrlPostPicture || ' '}
  126.                         alt="photo profil utilisateur"
  127.                     ></img>
  128.                 </div>
  129.                 <div className="separator"></div>
  130.                 <div className="ContenairOptions">
  131.                     <div className="iconLikeOn">
  132.                         <button className="buttonLike" onClick={likeSystem}>
  133.                             <FontAwesomeIcon
  134.                                 id={posts._id}
  135.                                 icon={farThumbsUp}
  136.                             />
  137.                         </button>
  138.                     </div>
  139.                     {<p>{posts.likes} </p>}
  140.                 </div>
  141.             </div>
  142.         ))
  143.     }

n°2431257
gatsu35
Blablaté par Harko
Posté le 05-11-2022 à 21:04:40  profilanswer
 

Tu devrais créer une fonction qui t'éviteras de répéter une bonne partie de tes appels avec fetch.
 
exemple de fonction qui sera idéale pour toi :  
 

Code :
  1. const async callApi = ({body, url}) => {
  2. fetch(
  3.                 url,
  4.                 {
  5.                     method: 'GET',
  6.                     headers: {
  7.                         'Content-Type': 'application/json',
  8.                         Authorization: `Bearer ${authContext.token}`,
  9.                     },
  10.                     body : body || undefined
  11.                 }
  12.             )
  13. }


 
Et vu la gueule de ton code, tu devrais pouvoir largement factoriser ton if et ton else à l'intérieur car c'est quasiment la même chose.
Il n'y a que 1 et 0 qui changent


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

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

  [React] Comment changer le state de manière unique dans une map

 

Sujets relatifs
[Javascript - React] useRef dans map() ne fonctionne pasMacros MS Publisher 2007 (Topic Unique ?)
Changer la couleur des liens déjà vus des résultats google searchRécupérer les valeurs d'un csv et changer le format au vol
MonoGame 3.8 - Le topic UniqueChanger nom element et garder les namespaces
Changer de Imacros[POSTGRESQL] WTF création unique impossibe
[React/JS] Actualiser image dans le frontDiviser un gros document Word en plusieurs Word unique (1200 pages)
Plus de sujets relatifs à : [React] Comment changer le state de manière unique dans une map


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