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

Comment changer le state de manière unique dans une map [React] - Javascript/Node.js - Programmation

Marsh Posté le 04-11-2022 à 23:55:26    

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

Reply

Marsh Posté le 04-11-2022 à 23:55:26   

Reply

Marsh Posté le 04-11-2022 à 23:57:31    

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.

Reply

Marsh Posté le 05-11-2022 à 19:37:52    

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

Reply

Marsh Posté le 05-11-2022 à 21:04:40    

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
Reply

Sujets relatifs:

Leave a Replay

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