0
162
VistasRecuperar múltiples valores nulos antes de recuperar datos en la solicitud de recuperación
¿Cómo trato con volver nulo en las solicitudes de recuperación? Eventualmente, la solicitud se realiza, pero por alguna razón devuelve un montón de valores nulos antes de obtener los datos. ¿Podría ser algo malo con mi código o es solo un comportamiento de búsqueda normal?
Obtener configuración
const [subDomains, setSubDomains] = useState(null) const [website, setwebsite] = useState("twitter.com") useEffect(() => { async function fetchData() { const response = await fetch("api_url="+website,{ headers: { "X-Api-Key": "hidden" } }) const data = await response.json() const subdomains = data["ContributingSubdomain"] const convertedsubdomains = Object.keys(subdomains) let otherdomains = [] for(let i=0; i < convertedsubdomains.length; i++) { const subdomains2 = data.ContributingSubdomain[i]["DataUrl"] otherdomains.push(subdomains2) } setSubDomains(otherdomains) } fetchData() }, [website])Luego, la propiedad de subdominios se pasa a un componente como dominios .
const SubDomains = ({domains}) => { return ( <div> <div> {domains.forEach((e) => <h2>{e}</h2> )} </div> </div> ) } export default SubDomainsRecibo un error que dice TypeError: no se pueden leer las propiedades de nulo (leyendo 'forEach')
Cuando hago console.log(domains) , veo que obtengo un montón de nulos antes de obtener los datos reales, lo que supongo que está causando el error anterior. pero no se que estoy haciendo mal al pedir los datos y pasarlos 
1 Respuestas
Responde la pregunta0
Realmente no sé por qué regresa sigue devolviendo nulo antes de obtener la respuesta, pero dado que inicializó subDomains en nulo, devolverá nulo para el primer renderizado. Pero para arreglar el
TypeError: no se pueden leer las propiedades de nulo (leyendo 'forEach')
todo lo que tiene que hacer es verificar si los domains tienen un valor antes de asignar los valores.
Puedes cambiar esta línea:
{domains.forEach((e) => <h2>{e}</h2> )}a:
{domains?.forEach((e) => <h2>{e}</h2> )}Observe que agregué un signo de interrogación antes de los dominios. Es el operador de encadenamiento opcional (?.) . Le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.
Además, ¿por qué no mapear los valores, en lugar de forEach ? Al igual que:
{domains?.map((domain, index) => <h2 key={index}>{domain}</h2> )}Si hay identificaciones que vienen con los dominios, puede usarlas como clave en lugar del índice.