0

Soy nuevo en React y estoy tratando de escribir una aplicación que funcione con una API. Sigo recibiendo este error:

TypeError: this.setState no es una función

Cuando trato de manejar la respuesta API. Sospecho que hay algo mal con este enlace, pero no puedo encontrar la manera de solucionarlo. Aquí está el código de mi componente:

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




class  App extends Component {
  constructor(){
    super();
    
    this.state ={
      numero_comunas:[]
    };
    
    axios.get('http://mi_url')
  .then(response => {
    this.setState({
      numero_comunas:response.data
    })
  })
  .catch(error => {
    console.log(error);
  })

}
 render(){
  return ( 
   <div>
      <h1>HOLA MUNDO</h1>
      <ul>
        {this.state.numero_comunas.map(numero_comuna => 
          <li> {numero_comuna} </li>
          )}
      </ul>
    </div>
    );
 
  }
 
}

export default App;

3 respuestas 3

1

Usted debería preferir usar Hooks.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [col, setCol] = useState(null);
  
  useEffect(()=>{
    // Fetch an api right here
    axios.get('http://mi_url')
     .then(response => setCol(response.data))
     .catch(error => console.log(error))

  }, [])
  
  return (
   <div>
      <h1>HOLA MUNDO</h1>
      <ul>
        {
          col ? 
            col.map((columna, i) => 
            <li key={i}>{i} - This is a column {columna} </li>
            ) 
          : null
        }
      </ul>
    </div>
  );
}

export default App;

0

Jamas realices una llamada a una API o una suscripción desde el constructor de un componente.

Para eso existe el método componentDidMount que se ejecuta inmediatamente después de la función render. Entonces tu código quedaría algo así;

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




class  App extends Component {
  constructor(){
    super();
    
    this.state ={
      numero_comunas:[]
    };
  }
  componentDidMount(){
   let _selft=this;
   axios.get('http://tu_url')
  .then(response => {
    _selft.setState({
      numero_comunas:response.data
    })
  })
  .catch(error => {
    console.log(error);
  })

  }
 render(){
  return ( 
   <div>
      <h1>HOLA MUNDO</h1>
      <ul>
        {this.state.numero_comunas.map(numero_comuna => 
          <li key={debes de poner un valor unico aqui}> {numero_comuna} </li>
          )}
      </ul>
    </div>
    );
  }
}

export default App;

Agregue la linea let _selft=this; para utilizar _selft dentro de la promesa de axios(ya que no la utilizo y no estoy seguro que this funcione dentro). Ademas de key que debe ser un valor único en tu lista.
--Hasta aquí la respuesta--

Nota: Pude ver tu objeto json y no es un array, te retorna un objeto, asi que quiza aun tengas problemas para recorrerlo

0

El problema se presenta por que no puedes llamar al metodo setState en el constructor.

El metodo de setState debe ser llamado en los ciclos de vida componentWillMount o componentDidMount.

En tu caso particular ya que estas realizando una petición a datos externos, realiza la petición en el ciclo de vida componentDidMount.

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}
    };
  }
  componentDidMount() {
    const getData = async () => {
      const RESPONSE = await fetch("https://rickandmortyapi.com/api/");
      const DATA = await RESPONSE.json();
      console.log(DATA);
      this.setState({ data: DATA });
    };
    getData();
  }
  render() {
    return (
      <div>
        <h1>Hello Api</h1>
        {this.state.data.characters && <div>{this.state.data.characters}</div>}
      </div>
    );
  }
}

export default App;

Aqui el ejemplo con componentDidMount

tambien podrías usar un componente de tipo función y usar el Hook useEffect.

import React, { useEffect, useState } from "react";
import "./styles.css";

const App = () => {
  const URI = "https://rickandmortyapi.com/api/";
  const [data, setData] = useState({});
  useEffect(() => {
    const getData = async () => {
      const RESPONSE = await fetch(URI);
      const DATA = await RESPONSE.json();
      console.log(DATA);
      setData(DATA);
    };
    getData();
  }, [URI]);
  return (
    <div className="App">
      <h1>Hello Api</h1>
      <h2>Demo consulta</h2>
      {data.characters && <div>{data.characters}</div>}
    </div>
  );
};

export default App;

Aqui el ejemplo usando useEffect

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.