0

Estoy usando reactjs , mysql y php y no puedo conectarme a la base de datos, me sale el sgte error

App.js:17 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at App.js:17

import '../App.css';
import React, { Component } from 'react';
import Tabela from './Tabela';

class App extends Component{

    constructor(){
        super();
        this.state=({
            db: []
        });
        this.exibirCarros();
    }

    exibirCarros(){
        fetch("http://localhost/Api/classConexion.php")
        .then((response)=>response.json())
        .then((responseJson)=>
        {
            this.setState({
                db: responseJson
            });
        })
    }

    render(){
        return(
          <div>
              <Tabela arrayCarros={this.state.db } />

          </div>
        );
    }
}

export default App;

alguien podria ayudarme, no que se pueda hacer, gracias

2 respuestas 2

1

Debieras primero ver si tu api en PHP puede retornar los datos de conección como un JSON para que sea mas facil trabajar con eso y evitar errores. Luego puedes validar la respuesta para evitar errores. Ejemplo:

var processStatus = function (response) {
    if (response.status === 200 || response.status === 304) {
        return Promise.resolve(response)
    } else {
        return Promise.reject(new Error(response.statusText))
    }
};

fetch("http://localhost/Api/classConexion.php")
   .then(processStatus).
   .then(res => res.json())
   .then(res => {
        this.setState({
                db: res.db
        });                
   });

En tu API de PHP para la respuesta puedes usar esto:

$jsonData['db'] = 'nombreDB';
echo json_encode($jsonData);
0

Creo que el error está aquí:

.then((response)=>response.json())

Ocurre porque la repuesta del fetch no puede ser trasformada a JSON de manera correcta, ya sea porque no retorna nada o la respuesta no tiene formato json.

Intenta hacer esto y ve que en la consola del navegador que te responde el servidor, para verificar que te retorna lo correcto:

class App extends Component{
  constructor(){
    super();
    this.state= {
        db: []
    };
  }
  componentDidMount(){
    fetch("http://localhost/Api/classConexion.php")
    .then( response => response.text())
    .then( text => console.log(text));
  }
  render(){
    return(
      <div>
          <Tabela arrayCarros={this.state.db } />
      </div>
    );
  }
}

Y te recomiendo que no ejecutes métodos o sentencias que hagan cambios de estado en el constructor

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.