Bonjour,

J'ai créer une application, coté front j'utilise react et coté back j'utilise php.

J'ai créer une api en php que j'aimerais utiliser dans mon application react à l'aide de axios mais cela ne fonctionne pas.

Voici le code que j'ai fait et je ne comprend pas pourquoi les données de l'api ne s'affiche pas dans mon application.

dans un dossier back-office, j'ai créer un fichier api.php :

et dans un dossier front, j'ai créer mon application react :

Merci d'avance de votre aide !

<?php


// Permet de faire croire au navigateur que l'on est sur un fichier json
header('Content-type: application/json');

// Connecté la bdd
try{
$pdo = new PDO('mysql:host=localhost;dbname=api;charset=utf8', 'root', '');
$retour["success"] = true;
$retour["message"] = "Connexion réussie";
} catch(Exception $e){
$retour["success"] = false;
$retour["message"] = "Connexion impossible";
}

// Requête pour afficher les données
$requete = $pdo->prepare("SELECT*FROM `film`");
$requete->execute();
$resultats = $requete->fetchAll();

// Création des valeurs
$retour["success"] = true;
$retour["message"] = "Voiçi les films disponible";
$retour["results"]["nombre de films"] = count($resultats);
$retour["results"]["film"] = $resultats;


// Afficher les valeurs
echo json_encode($retour);

?>

// Le front

import React from 'react';
import './App.css';
import axios from 'axios';

class App extends React.Component {

state = {
  apiResponse:[]
}

componentDidMount = () => {
  axios.get('http://localhost:8080/train-react-php/back-office/api.php')
  .then(response => {
    this.setState({apiResponse: response.data });
  })
  .catch(error => {
    console.log(error);
  });
}

render() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 className="title">TODO-LIST</h1>
        {
          this.state.apiResponse.map(apiResponse =>(
            <div key={apiResponse.id}>
                {apiResponse.film}
            </div>
          ))
        }
      </header>
    </div>
  );
}
}

export default App;

Voilà aussi à quoi ressemble l'api que j'ai créer en php si cela peut aider !

{
  "success": true,
  "message": "Voiçi les films disponible",
    "results": {
    "nombre de films": 2,
      "film": [
        {
        "0": "1",
        "1": "Harry Potter et la coupe de feu",
        "2": "Aventure",
        "3": "J.K Rowling",
        "id": "1",
        "film": "Harry Potter et la coupe de feu",
        "type": "Aventure",
        "realisateur": "J.K Rowling"
        },
        {
        "0": "2",
        "1": "Les Dents de la mer",
        "2": "Horreur",
        "3": "Steven Spielberg",
        "id": "2",
        "film": "Les Dents de la mer",
        "type": "Horreur",
        "realisateur": "Steven Spielberg"
        }
      ]
    }
}

Voiçi les deux erreurs qu'ils me disent dans la console du navigateur :

index.js:1 The above error occurred in the <App> component:

    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

/////////

Uncaught TypeError: this.state.apiResponse.map is not a function

En espérant que vous puissiez m'aidez !

-
Edité par LucasMoreno3 25 janvier 2020 à 14:12:14

Je pense que c'est normal. Le résultat n'est pas un tableau sur lequel tu peux invoquer la méthode map. Il faudrait plutôt

this.state.apiResponse.results.film.map(...)

-
Edité par kulturman 26 janvier 2020 à 1:31:40