Tengo un componente React que usa useEffect y axios para recibir datos de una API. Luego, los datos se almacenan en algún estado cuyo valor inicial es "nulo". Estoy tratando de pasar el estado como accesorio, pero no se define hasta que se completa la función useEffect. Estoy usando doble ampersand y todavía no está definido. ¿Cómo espero hasta que se defina el estado antes de pasarlo como accesorio? Así es como estoy tratando de hacerlo.
import { useState, useEffect } from "react" import Component from "./Component" import axios from 'axios' export default function Items() { const [item, setItem] = useState(null) useEffect(() => { axios.get(`http://testapi/item`).then((res) => { setItem(res.data) }) }, []) return ( <div> <Component code={item && item._id} /> </div> ) }Como dijeron los demás, optaría por la representación condicional, pero dado que la búsqueda se ejecuta en la carga de la página, se muestra un texto de carga y/o un control giratorio.
import { useState, useEffect } from "react" import Component from "./Component" import axios from 'axios' export default function Items() { const [item, setItem] = useState(null) useEffect(() => { axios.get(`http://testapi/item`).then((res) => { setItem(res.data) }) }, []) const dataToShow = () => { if (item) return <Component code={item && item._id} /> return <p>...loading</p> } return ( <div> {dataToShow()} </div> ) }Solo saca la condición:
return ( <div> {item && <Component code={item._id} />} </div> )