0
210
VistasPor qué mi estado no se configura dentro del componente basado en clase y debería funcionar, pero no lo es ni recibo un error
El problema al que me enfrento es que no puedo establecer mi estado en el componente basado en la clase. No sé qué tiene de malo. Creé un proyecto muy pequeño antes de esto para poder practicar la manipulación del estado y estoy haciendo el de la misma manera que el proyecto de prueba funciona, por favor ayuda
import React, { Component } from 'react'; import { Header } from './components'; import { ProductListing, ProductDetail, Cart } from './Screens'; import { Routes, Route, Navigate } from "react-router-dom"; export class App extends Component { constructor(){ super(); this.state = { products: [], cart: [] } } async componentDidMount() { const query = ` query{ categories { name products { id, name, inStock, gallery, category } } } `; fetch("http://localhost:4000", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json", }, body: JSON.stringify({ query }) }).then(response => { return response.json(); }).then(data => { this.setState({ products: data.data.categories, }) console.log("The data i am getting is", data.data.categories); }) console.log("The prodcuts are", this.state.products) } render() { return ( <> <Header /> <Routes> <Route path="/" element={<Navigate replace to="/all" />} /> <Route path="/:category" element={<ProductListing products={this.state.products} />} /> <Route path="/product" element={<ProductDetail />} /> <Route path="/cart" element={<Cart />} /> </Routes> </> ) } } export default AppNo entiendo por qué este fragmento de código no funciona, se supone que debe configurar los datos y enviarlos al componente, pero en realidad no lo está haciendo y tampoco da error.
this.setState({ products: data.data.categories, })el siguiente fragmento de código
console.log("The data i am getting is", data.data.categories); 
1 Respuestas
Responde la pregunta0
this.setState es una función asíncrona
y console.log("Los productos son", this.state.products) es un código síncrono
por lo que no imprime el resultado correcto
Puede imprimir los datos en la función de devolución de llamada de this.setState
como esto
this.setState({...}, () => { console.log(...) }) Debería poder obtener el resultado correcto.
Y en el componente ProductListing
No estoy seguro de cuándo está imprimiendo el archivo console.log
porque sus datos se solicitan de forma asíncrona y obtiene
y la representación del componente secundario no se realiza necesariamente después de la solicitud
Entonces, si desea imprimir con éxito los datos del componente secundario
ya sea durante el ciclo de vida de la actualización
o en la función de render
espero que esto te ayude