Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

201
Vistas
El valor de estado del componente de la clase React no se actualiza

Soy nuevo para reaccionar js. Lo estoy aprendiendo creando una aplicación simple. Traté de crear una aplicación meteorológica simple usando el componente de clase de reacción. Todo funciona bien, pero el resultado almacenado en una variable de estado no se imprime en la plantilla. Puedo ver la respuesta de la API en la consola y luego almacenar el resultado en la variable de estado 'currWeatherRes' que no se muestra en la plantilla (la ubicación siempre está en blanco)

 import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(){ super(); this.state = { cityName: "", currWeatherRes: {} } } handleSubmit = (event) => { event.preventDefault(); alert(`The name you entered was:`+ this.state.cityName); fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, { method: 'GET' }).then((response) => { console.log(response) this.setState({ currWeatherRes: response }) //return response.json(); }); } handleChange = (event) => { this.setState({cityName:event.target.value}); } render() { return ( <div className="weather-app"> <form onSubmit={this.handleSubmit}> <input type="text" value={this.state.cityName} onChange={this.handleChange} placeholder="Enter City"/> <button type="submit" value="Submit">Submit</button> </form> {(typeof this.state.currWeatherRes.main != "undefined") ? ( <div className="weather-details"> <div className="weather-location"> <div className="location">Loctaion: {this.state.currWeatherRes.name}</div> </div> </div> ):('')} </div> ); } } export default App;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

El problema no estaba relacionado con la reacción, sino con la forma en que manejó la llamada a la API.

Arreglar:

 fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, { method: 'GET' }).then((response) => { return response.json(); }).then((res) => { this.setState({ currWeatherRes: res }) });

Código de trabajo:

 import React, { Component } from 'react'; class App extends Component { constructor(){ super(); this.state = { cityName: "", currWeatherRes: {} } } handleSubmit = (event) => { event.preventDefault(); alert(`The name you entered was:`+ this.state.cityName); fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, { method: 'GET' }).then((response) => { return response.json(); }).then((res) => { this.setState({ currWeatherRes: res }) }); } handleChange = (event) => { this.setState({cityName:event.target.value}); } render() { console.log(this.state.currWeatherRes) return ( <div className="weather-app"> <form onSubmit={this.handleSubmit}> <input type="text" value={this.state.cityName} onChange={this.handleChange} placeholder="Enter City"/> <button type="submit" value="Submit">Submit</button> </form> {(typeof this.state.currWeatherRes.main != "undefined") ? ( <div className="weather-details"> <div className="weather-location"> <div className="location">Loctaion: {this.state.currWeatherRes.name}</div> </div> </div> ):('')} </div> ); } } export default App;
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda