SyntaxError: JSON.parse avec Fetch (React-Vite)
Bonjour,
D'abord pour me présenter, je suis un "développeur" autodidacte senior par l’age (55 ans) mais très junior par l’ancienneté puisque j’ai du me mettre au développement web dans ma boite seulement depuis à peine 5 ans. J’arrive à me débrouiller avec PHP et javascript dans le sens où j’arrive toujours à trouver une solution à ce que l’on me demande
D’un naturel curieux je viens de suivre une formation/initiation sur REACT et pour mettre en pratique avec un exemple qui ne soit pas trop mâché j’ai voulu refaire un annuaire que j’avais réaliser auparavant. Rien de bien compliqué normalement.
Mais je rencontre un problème avec fetch que je n’arrive pas à comprendre ni à solutionner c’est pourquoi je sollicite un peu d’aide si vous avez un peu de temps.
Pour faire simple mon appel fetch va recourir à une page php qui devra récupérer la liste des magasins (BDD mySQL) et qui retourne le résultat au moyen de json_encode.
Comme j'ai des problèmes j'ai simplifié au max le code pour limiter des problème annexes. Et pour le moment je cherche juste à avoir en retour un json "basique".
J'espère donc obtenir mon entête avec en dessous "pas de magasins"
En mode développement (Vite) cela ne fonctionne pas, j'ai seulement l'entête.
Par contre en console le message d’erreur que je ne m'explique pas :
Citation:
(Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data )
Pourtant le retour du fichier PHP est le même dans ce projet que dans celui en seul PHP-javascript et qui fonctionne très bien.
Le pire si je puis dire c'est que quand je fais un build et copie le contenu de dist dans mon site local test.local (crée pour l'occasion) j’ai bien le résultat escompté.
En l’occurrence l’info « pas de magasins» sous l’entête.
Quelqu’un à t-il une idée, une piste ou une solution pour que je puisse avoir le retour du fetch quand je suis en dev ? Parce que si je dois build puis copier dans test.local pour voir si tout fonction ça va être l’enfer.
J’espère ne pas avoir été trop long, sinon promis je serai plus direct à l’avenir.
Mon fichier App.jsx :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| export function App() {
const [lesMagasins, setLesMagasins] = useState(null);
const RecupereMagasinsListe = async () => {
const Reponse = await fetch('/ajax/ListeMagasins.ajax.php');
console.log(Reponse);
const Data = await Reponse.json();
setLesMagasins(Data);
}
useEffect(() => {
RecupereMagasinsListe();
}, []);
return (
<div className='bg-slate-200 m-4 p-4'>
<h1 className='mt-8 py-2 text-center text-4xl text-white bg-blue-400'>Annuaire du réseau</h1>
<div>{lesMagasins && lesMagasins.message}</div>
</div>
)
} |
Mon fichier ListeMagasins.ajax.php :
Code:
1
2
3
4
5
| <?php
$Retour = ['message' =>'Pas de magasins'];
echo json_encode($Retour); |
