-1

Bem estou com dificuldade e não achei uma solução ainda, queria desenvolver um crud usando ReactJS + PHP + Mysql; Fiz um arquivo php que retorna um objeto JSON para que eu possa acessar ele pelo React.

<?php
    //Header
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json; charset=UTF-8");
    //
    include '../conf/database.php';
    include '../objects/carro.php';
    //
    $database = new Database();
    $db = $database->getConnection();
    //
    $carro = new Carro($db);
    //
    $stmt = $carro->read();
    $num = $stmt->rowCount();
    //
    if($num>0){
        $carros_arr=array();
        $carros_arr["records"]=array();
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            extract($row);
            $carros_arr["records"][$id] = array(
                "id" => $id,
                "nome" => $nome,
                "descricao" => html_entity_decode($descricao),
                "marca" => $marca,
                "valor" => $valor
            );
        }
        http_response_code(200);
        echo json_encode($carros_arr);
    }else {
        http_response_code(404);
        echo json_encode(
            array("message" => "No products found.")
        );
    }
?>

E o arquivo React:

import React, {Component} from 'react';
import './styles.css';
import axios from 'axios';

export default class Main extends Component{
    state = {
        carros : [],
        isLoading : true
    }

    componentDidMount(){
        this.loadCars();
    }

     loadCars(){
        const url = "http://localhost/apihunt/carro/read.php";

        //METODO 1
        /*axios(url)
        .then(response => response.data)
        .then(data => {
            this.setState({
                carro : data,
                isLoading : false
            });    
        });*/

        //METODO 2
        /*const response =  axios(url);
        const {records} = response.data;
        this.setState({
            carro : records
        })*/

        //METODO 3
        fetch("http://localhost/apihunt/carro/read.php")
        .then((response) => response.json())
        .then((responseJson) => (
            this.setState({
                carros : responseJson
            })
        ));
        console.log(this.state.carros);
    }

    render(){
        return(
            <div className="list-item">

            </div>
        );
    }
}


Nenhum dos métodos esta funcionando, e também tentei usar async-await;

Alguma sugestão ou um CRUD usando React, PHP e mysql?

3
  • Se colocares http://localhost/apihunt/carro/read.php diretamente no url do browser vêz o JSON?
    – Sergio
    12/05/2019 às 1:55
  • sim, o código php esta rodando perfeitamente , e o axios no js esta atribuindo o array para o state, o problema esta na hora que uso o map no array diz "object.map is not function" 13/05/2019 às 13:45
  • Resposta : stackoverflow.com/questions/56114358/… O problema estava no php. 21/06/2019 às 0:02

2 Respostas 2

0

A função map só funciona em Arrays, para certificar que o retorno da api esteja em dentro de um Array use o seguinte código

//METODO 3
fetch("http://localhost/apihunt/carro/read.php")
 .then((response) => response.json())
  .then((responseJson) => (
    this.setState({
      carros : [responseJson]//coloque dentro de um array
    })
));
5
  • Mas daí se já for um array vai dar problema. Pode fazer: carros: Array.isArray(responseJson) ? responseJson : [responseJson]
    – mari
    23/05/2019 às 20:13
  • Returns a string containing the JSON representation of the supplied value. quando ele faz json_encode retorna uma string, quando a função setState é chamada retorna um novo estado. 23/05/2019 às 23:47
  • Nesse caso carros seria um array contendo um único elemento que seria a string representando o json. O que não é o que OP quer.
    – mari
    24/05/2019 às 11:37
  • Exatamente como o retorno desse json vai ver algo assim {{...}} o map não funcionará, o retorno desse json deveria algo assim [{...},{...},...], como não é assim o setState({carros:[responseJson]}) resolverá 24/05/2019 às 14:09
  • Não, o retorno é algo assim: {"records"{"1": {"id":"1","nome":"carro 1"...},{"2":{...}...}. Colocar isso entre colchetes criará um array com um único elemento que é o mesmo objeto que ele recebeu do servidor. Veja a minha resposta.
    – mari
    24/05/2019 às 15:33
0

O console.log(this.state.carros); logo após o setState não vai funcionar pois o setState é assíncrono. Coloque o console.log dentro do render(): deve aparecer s saída umas duas vezes no console sendo a última após o estado ter realmente mudado.

Se a chamada ao PHP estiver OK o que está sendo retornado não é um array e sim um objeto json no formato:

{"records":{"1":{"id":"1","nome":"carro 1","descricao":"descricao 1","marca":"marca 1","valor":"1.00"},"2":{"id":"2","nome":"carro 2","descricao":"descricao 2","marca":"marca 2","valor":"2.00"},"3":{"id":"3","nome":"carro 3","descricao":"descricao 3","marca":"marca 3","valor":"3.00"}}}

Ver geração usando php aqui: http://sandbox.onlinephpfunctions.com/code/9293cf990a2bc7a23b37a5faf9ce28606bfde39b

Um objeto deve ser percorrido com os métodos de Object :

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const { records } = {
    records: {
      "1": {
        id: "1",
        nome: "carro 1",
        descricao: "descricao 1",
        marca: "marca 1",
        valor: "1.00"
      },
      "2": {
        id: "2",
        nome: "carro 2",
        descricao: "descricao 2",
        marca: "marca 2",
        valor: "2.00"
      },
      "3": {
        id: "3",
        nome: "carro 3",
        descricao: "descricao 3",
        marca: "marca 3",
        valor: "3.00"
      }
    }
  };
  const carros = Object.values(records).map(c => (
    <li>
      {c.id} || {c.nome} || {c.descricao} || {c.marca} || {c.valor}
    </li>
  ));

  return (
    <div className="App">
      <h1>Carros</h1>
      <ul>{carros}</ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Veja o código react funcionando aqui: https://codesandbox.io/s/floral-river-o7r7k

Lembrando que o mapeamento do objeto que vem do PHP e é setado no state deve ser feito no render e não logo após chamar o setState.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .