Discussion :

[BzhFab]

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 :

(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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
 
    $Retour = ['message' =>'Pas de magasins'];
 
    echo json_encode($Retour);

[Toufik83]

Bonjour,

Je n'utilise pas React mais je connais les erreurs de fetch, et ce message d'erreur (Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data ) signifie que le retour du fichier PHP ne peut pas être décodé en tant que JSON, ceci dit qu'il y'a forcément une erreur soit de syntaxe ou bien de logique.

Pour visualiser le retour du fichier PHP sur le navigateur, ouvrez l'outil de développement et regardez l'onglet Réseau puis vous verrez le lien de votre appel à /ajax/ListeMagasins.ajax.php, cliquez dessus et regardez l'onglet Response.

Il vaut mieux gérer le bloc d'erreur avec un try catch comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
try{
   const Reponse = await fetch('/ajax/ListeMagasins.ajax.php');
   console.log(Reponse);
   const Data = await Reponse.json();
   setLesMagasins(Data);
}catch(erreur){
   console.error("Erreur : ",erreur.message)
}

[BzhFab]

Je vous remercie d'avoir accordé un peu de temps à mon problème.
Je pense avoir trouvé, peut être pas la solution ou l’explication mais un moyen de contourner ce problème.

const Reponse = await fetch('/ajax/ListeMagasins.ajax.php') fonctionne très bien dans ma version classique du site (PHP-JavaScript) mais visiblement là il ne trouve pas mon fichier.

J'ai bien essayé avec le chemin plus complet en dev const Reponse = await fetch('http://localhost:5173/ajax/ListeMagasins.ajax.php') mais avec le même résultat.
Et puis j'ai eu l'idée de créer un virtalhost et dans ce cas const Reponse = await fetch('http://monsite.local/ajax/ListeMagasins.ajax.php') donne le résultat escompté.

J'aurai peut être du y penser avant, mais c'est comme ça quand on débute, ou oublie des évidences et puis c'est comme ça qu'on avance petites erreurs après petites erreurs.
Pour le try catch ce n'est pas bien mais, comme je faisais de "simples" tests je n'ai pas pris le temps d'ajouter ces lignes alors que cela ne prends pas de temps !

En tout cas merci pour votre réponse.