Notification en double si l'article n'existe pas

Question

Salut Louis-Nicolas,
Pour toutes les autres notifications aucun souci, mais pour l'error si l'article n'existe pas j'ai un doublon de la notification je ne sais pas pourquoi.
// useEffect
useEffect(() => {
axios.get(`/articles.json?orderBy="slug"&equalTo="${slug}"`)
.then(response => {
// if the article does not exist
if (Object.keys(response.data).length === 0) {
navigate(routes.HOME, {replace: true});
toast.error('Cet article n\'existe pas.');
}
// if the article exist
for (let key in response.data) {
setArticle({
...response.data[key],
id: key,
date: response.data[key].date.slice(0, 10)
});
}
})
.catch(error => console.log(error));
}, [navigate, slug]);

Simon Honoré · Accepted Answer

Merci pour ta réponse mais ça ne changeait rien. J'ai réussi à trouver la solution dans la doc, si jamais ça peut en aider d'autres 😁
Il suffit de rajouter un id au toast :
toast.error('Cet article n\'existe pas.', {
toastId: 'articleNotFound'
});

Louis-Nicolas Leuillet · Answer

Salut !
Je suis d'accord avec toi. Pour éviter ce double envoi de notification, tu peux ajouter une vérification supplémentaire pour t'assurer que l'erreur est bien liée à l'article manquant en vérifiant le code de statut de la réponse. Voici un exemple de code qui pourrait t'aider :
axios.get(`/articles.json?orderBy="slug"&equalTo="${slug}"`)
.then(response => {
// if the article does not exist
if (Object.keys(response.data).length === 0) {
navigate(routes.HOME, {replace: true});
toast.error('Cet article n\'existe pas.');
} else {
for (let key in response.data) {
setArticle({
...response.data[key],
id: key,
date: response.data[key].date.slice(0, 10)
});
}
}
})
.catch(error => {
if (error.response && error.response.status === 404) {
navigate(routes.HOME, {replace: true});
toast.error('Cet article n\'existe pas.');
} else {
console.log(error);
}
});
Avec cette modification, le code vérifie d'abord si la réponse contient des données pour l'article demandé. Si ce n'est pas le cas, il envoie une notification d'erreur et redirige l'utilisateur vers la page d'accueil. Sinon, il met à jour l'état de l'article comme avant. Si la requête lance une erreur, le code vérifie si la réponse a un statut de 404 avant d'envoyer une notification d'erreur et de rediriger l'utilisateur vers la page d'accueil. Si ce n'est pas le cas, il console l'erreur comme avant.

Notification en double si l'article n'existe pas

Créez des sites internet interactifs avec React 16 et Redux