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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [React] Comment changer le state de manière unique dans une map

Profil supprimé

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 :

/*Autre tableau comparatif test*/
// let newArray = [];
// function findDataResult(el, idx, arr) {
// let userId = el.find((id) => id === dataResult.infos._id);
// if (userId) {
// toggleLike('likeUp')
// //setTest(true);
// // console.log('yes');
// } else if (!userId) {
// toggleLike('likeNone')
// //setTest(false);
// // console.log('no');
// }
// // console.log(test)
// }
// useEffect(() => {
// if (!isDataLoading) {
// dataResultPosts.forEach((likeArr) => newArray.push(likeArr.usersLiked));
// newArray.forEach(findDataResult);
// }
// },[isDataLoading]);
// console.log(likeState.like)
/*Fonction pour requête fetch au onClick (fonctionne)*/
const likeSystem = async (e) => {
// console.log(e.target.id)
// let inputLike = document.querySelector('#likeInput')
// inputLike.value = parseInt(inputLike.value) + 1
// let iconLikeOn = document.querySelector('#iconLikeOn')
// iconLikeOn.classList.add('iconLikeOn')
// if (likeUser === 0) {
// setLikeUser(1)
// }
// // if (likeUser === 1) {
// // setLikeUser(0)
// // }
let idUrl = e.target.id
if (likeUser === 0) {
try {
const response = await fetch(
'http://localhost:4200/api/ficheUser/post/like/' + idUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
body: JSON.stringify({
userId: authContext.userId,
likes: 1,
}),
}
)
const dataResponse = await response.json()
if (response.ok) {
setLikeUser(1)
}
} catch (err) {
console.log(err)
}
}
if (likeUser === 1) {
try {
const response = await fetch(
'http://localhost:4200/api/ficheUser/post/like/' + idUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
body: JSON.stringify({
userId: authContext.userId,
likes: 0,
}),
}
)
const dataResponse = await response.json()
if (response.ok) {
setLikeUser(0)
}
} catch (err) {
console.log(err)
}
}
}
/*Ici que le state se généralise*/
class PostDisplay extends React.Component {
constructor(props) {
super(props)
const { infosPosts } = this.props
const { infosUsers } = this.props
this.state = {
liked: null,
}
this.handleChangeLike = this.handleChangeLike.bind(this)
}
handleChangeLike() {
this.props.infosPosts.forEach((array) => {
if (array.usersLiked.length > 0) {
for (let userId of array.usersLiked) {
if (userId === '6361843f1b0448be3a676de3') {
this.setState({ liked: true })
console.log('a')
} else if (userId !== '6361843f1b0448be3a676de3') {
this.setState({ liked: false })
console.log('b')
}
}
}
// else {
// this.setState({liked: false})
// console.log('c')
// }
})
}
render() {
const { infosPosts } = this.props
const { infosUsers } = this.props
const { liked } = this.state
return infosPosts.map((posts) => (
<div className="allPostsAndModals" key={posts._id} onLoad={this.handleChangeLike}>
<div className="blockAuthor">
<div className="divAuthor">
<div className="pictureUserPost">
<img src="" className="imageUser"></img>
</div>
<div className="nameAuthor">
{posts.firstname} {posts.lastname}
</div>
<div className="divIconOptions">
<div className="blockIconOptions">
<p className="iconOption">
<FontAwesomeIcon
icon={faEllipsis}
fontSize="36px"
/>
</p>
</div>
</div>
</div>
</div>
<div className="blockContentPost">
<div className="paragraphContentPost">
{posts.postContent} {posts.id}
</div>
</div>
<div className="separator"></div>
<div className="blockImagePost">
<img
className="imagePost"
src={posts.imageUrlPostPicture || ' '}
alt="photo profil utilisateur"
></img>
</div>
<div className="separator"></div>
<div className="ContenairOptions">
<div className="iconLikeOn">
<button className="buttonLike" onClick={likeSystem()}>
<FontAwesomeIcon
id={posts._id}
icon={farThumbsUp}
/>
</button>
</div>
{likeState.like ? <p>Liké !test</p> : <p>Pas liké :/test</p>}
<input
className="inputLike"
defaultValue={posts.likes + likeUser}
></input>
</div>
</div>
))
}
}

Publicité

Profil supprimé

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.

Profil supprimé

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 :

const [dataResultPosts, setDataResultPosts] = useState([])
const likeSystem = async (e) => {
// console.log(e.target.id)
// let inputLike = document.querySelector('#likeInput')
// inputLike.value = parseInt(inputLike.value) + 1
// let iconLikeOn = document.querySelector('#iconLikeOn')
// iconLikeOn.classList.add('iconLikeOn')
let idUrl = e.target.id
try {
const response = await fetch(
'http://localhost:4200/api/ficheUser/post/one/' + idUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
}
)
const dataResponse = await response.json()
if (response.ok && dataResponse.likes === 0) {
console.log('a')
try {
const response = await fetch(
'http://localhost:4200/api/ficheUser/post/like/' +
idUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
body: JSON.stringify({
userId: authContext.userId,
likes: 1,
}),
}
)
const dataResponse = await response.json()
if (response.ok) {
fetch(urlGet, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
})
.then((resp) => resp.json())
.then((data) => setDataResultPosts([...data]))
}
} catch (err) {
console.log(err)
}
} else if (response.ok && dataResponse.likes === 1) {
console.log('b')
try {
const response = await fetch(
'http://localhost:4200/api/ficheUser/post/like/' +
idUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
body: JSON.stringify({
userId: authContext.userId,
likes: 0,
}),
}
)
const dataResponse = await response.json()
if (response.ok) {
fetch(urlGet, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
})
.then((resp) => resp.json())
.then((data) => setDataResultPosts([...data]))
}
} catch (err) {
console.log(err)
}
}
} catch (err) {
console.log(err)
}
}
const GetPost = ({ infosPosts, infosPostOne }) => {
return infosPosts.map((posts) => (
<div className="allPostsAndModals" key={posts._id}>
<div className="blockAuthor">
<div className="divAuthor">
<div className="pictureUserPost">
<img src="" className="imageUser"></img>
</div>
<div className="nameAuthor">
{posts.firstname} {posts.lastname}
</div>
<div className="divIconOptions">
<div className="blockIconOptions">
<p className="iconOption">
<FontAwesomeIcon
icon={faEllipsis}
fontSize="36px"
/>
</p>
</div>
</div>
</div>
</div>
<div className="blockContentPost">
<div className="paragraphContentPost">
{posts.postContent} {posts.id}
</div>
</div>
<div className="separator"></div>
<div className="blockImagePost">
<img
className="imagePost"
src={posts.imageUrlPostPicture || ' '}
alt="photo profil utilisateur"
></img>
</div>
<div className="separator"></div>
<div className="ContenairOptions">
<div className="iconLikeOn">
<button className="buttonLike" onClick={likeSystem}>
<FontAwesomeIcon
id={posts._id}
icon={farThumbsUp}
/>
</button>
</div>
{<p>{posts.likes} </p>}
</div>
</div>
))
}

gatsu35

Blablaté par Harko

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 :

const async callApi = ({body, url}) => {
fetch(
url,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authContext.token}`,
},
body : body || undefined
}
)
}

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

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 pas	Macros MS Publisher 2007 (Topic Unique ?)
Changer la couleur des liens déjà vus des résultats google search	Récupérer les valeurs d'un csv et changer le format au vol
MonoGame 3.8 - Le topic Unique	Changer nom element et garder les namespaces
Changer de Imacros	[POSTGRESQL] WTF création unique impossibe
[React/JS] Actualiser image dans le front	Diviser 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

Page générée en 0.178 secondes