0
115
VistasEstado indefinido incluso con estado inicial en React
Declaré un product con nombre de estado con valores iniciales. Sin embargo, aparece como indefinido una vez antes de cargar los nuevos valores. Esto causa problemas cuando quiero mapear su valor.
import React, { useEffect, useState } from 'react'; import './App.css'; import { useQuery, gql } from "@apollo/client"; import { LOAD_PRODUCT } from "./GraphQL/Queries"; import Product from './Components/Product'; function App() { const { error, loading, data } = useQuery(LOAD_PRODUCT) const [product, setProduct] = useState<Product>({ node: { id: 0, title: "Test" } }) useEffect(() => { setProduct(data) }, [data]) if(loading) return <h1>Loading...</h1> console.log(product) return ( <> <Product product={product}/> </> ); } export default App; 
1 Respuestas
Responde la pregunta0
Así que asumo que data no están definidos antes de que se obtengan de su base de datos. Y, por lo tanto loading devuelve true mientras tanto. Dado que loading = true antes de que data estén disponibles, su componente devuelve <h1>Loading...</h1> . Y, por lo tanto, no llega a su console.log(product) . Sospecho que si mueve console.log(product) justo antes de if(loading) return <h1>Loading...</h1> , obtendrá el resultado que necesita. Entonces, al principio, IMPRIMIRÁ el valor inicial, sin embargo, cambiará el valor inicial a indefinido (usando setProduct ) después de eso, y finalmente, cuando se obtengan los datos, setProduct en los data . Avíseme si eso funciona para usted, jugué un poco con el código de mi parte.