Estoy tratando de hacer una motocicleta en las redes sociales usando React.
cuando el usuario busque un modelo de motocicleta, mostrará todas las especificaciones, así como las personas que poseen la motocicleta, para que un usuario pueda comunicarse con ellos.
Entonces, estoy tratando de pasar toda la lista de propietarios de una página a OwnersList.jsx como accesorios, de modo que cuando la matriz de propietarios esté lista (después de obtener de MongoDB), OwnersList.jsx pueda mostrar a esas personas en la lista.
Quiero que muestre "CARGANDO..." cuando la matriz de accesorios esté vacía, y tan pronto como la matriz de accesorios esté lista, quiero que vuelva a renderizar los componentes.
Sin embargo, incluso después de que llega la matriz, la página sigue mostrando "CARGANDO..." y no cambia.
¿Qué estoy haciendo mal aquí?
Además, sería genial si pudiera saber qué tipo de conceptos básicos de React me faltan para estar atascado en este tipo de error.
OwnersList.jsx
import React from "react"; import { useEffect, useState } from "react"; export default function OwnersList({ ownerObjectsArray }) { useEffect(() => { console.log( "ownerObjectsArray.length is like this ", ownerObjectsArray.length ); }, [ownerObjectsArray]); if (ownerObjectsArray.length === 0) { console.log("yes, the array is empty. PLEASE WAIT"); return <h2>Loading...</h2>; } else { console.log("ownerObjectsArray is not empty, so , i will set it as state."); return ( <div> {ownerObjectsArray.map((ownerObject) => { return ( <div key={ownerObject.username}> <h3>{ownerObject.username}</h3> <button>contact</button> </div> ); })} OwnersList </div> ); } }Utilice el operador ternario ( condition ? result : else ) para representar JSX condicionalmente dentro de una declaración de return .
El cambio de accesorios activará una nueva representación, por lo que evaluará el ownerObjectsArray.length nuevamente y determinará qué JSX se debe representar.
No debería necesitar más código que este:
import React from 'react' export default function OwnersList({ ownerObjectsArray }) { return ownerObjectsArray.length ? ( <div> {ownerObjectsArray.map((ownerObject) => ( <div key={ownerObject.username}> <h3>{ownerObject.username}</h3> <button>contact</button> </div> ))} OwnersList </div> ) : ( <h2>Loading...</h2> ) }Hay un problema con "cambio de accesorios". Si la referencia a la matriz no cambia, no se activará la nueva representación. Entonces, si solo está actualizando la misma referencia en el componente principal, el elemento secundario no sabe que la matriz ha cambiado.
Ex:
const ownerObjectsArray = [] // do some stuff ownerObjectsArray.push(newObject)La referencia a la variable no cambia, solo una adición más al mismo lugar en la memoria.
Pero, para crear una nueva referencia a la matriz, haga algo como esto:
let ownerObjectsArray = [] // do some stuff ownerObjectsArray = [...ownerObjectsArray, newObject] Mejor aún, sería controlar la matriz con useState y pasar el estado al componente:
[ownerObjectsArray, setOwnerObjectsArray] = useState([]) // do some stuff setOwnerObjectsArray((prev) => [...prev, newObject])