Estoy tratando de pasar una matriz de usuarios registrados a un componente, sin embargo, no puedo porque siempre muestra la matriz vacía inicial antes de mostrar el contenido correcto. Intenté usar useRef y todavía no funciona.
const Home = () => { const nav = useNavigate() const [userList, setUserList] = useState([]); const [loggedInUser, setLoggedInUser] = useState({}); const [currentChat, setCurrentChat] = useState(undefined); const [showMenu, setShowMenu] = useState(false); useEffect(() => { const setLoggedIn = async() => { if (!localStorage.getItem('loggedInUser')) { nav('/'); } else { setLoggedInUser(await JSON.parse(localStorage.getItem('loggedInUser'))) } } setLoggedIn().catch(console.error); }, []) useEffect(() => { const fetchUsers = async () => { const data = await axios.get(`${allUsersRoute}/${loggedInUser._id}`); setUserList(data.data); } fetchUsers().catch(console.error); }, [loggedInUser._id]) console.log(userList); return ( <div id='container'> <div id='sidebar'> <div> <div id='home-header'> <h1>DevsHelp</h1> </div> <Userlist props={userList}/> </div> </div> )};Y aquí está el componente que estoy tratando de renderizar.
const Userlist = (props) => { return ( <div> <div id='home-header'> <h1>DevsHelp</h1> </div> <div id='userlist'> {props.map((prop) => { {console.log(props.length)} return ( <div className='user'> <h3>{prop.username}</h3> </div> ) })} </div> </div> )} export default Userlist;Básicamente, reaccionar devuelve .map no es una función, y supongo que es porque la matriz se vacía. Soy bastante nuevo en React, así que si alguien pudiera ayudarme, se lo agradecería mucho. ¡Gracias!
No nombraría accesorios para un componente "accesorios", en realidad:
<Userlist props={userList}/>Si realmente lo desea, al menos dentro de la lista de usuarios, deberá consultar el objeto props:
props.props.map... Asigne a sus accesorios algo que tenga sentido para usted, como, por ejemplo, "usuarios". Luego llama a props.users.map(user => {...})
Un componente React puede tomar muchos accesorios. Cuando desee acceder a ellos dentro del componente, debe hacerlo por su nombre. En su caso, definió la lista de usuarios de esta manera:
function Userlist(props){...} En este caso, se tendría que acceder a todos los accesorios a través del objeto props. Definió un valor de props dentro de este objeto cuando llamó a <Userlist props={userList]} />
Personalmente, siempre desestructurar accesorios cuando defino un nuevo componente, así:
function Userlist({users}) {...} Como nota al margen, su código habría funcionado si hubiera desestructurado el objeto props: function Userlist({props}) {...} Este sería el cambio más pequeño que podría hacer para que el código funcione, supongo. Pero, de nuevo, no usaría "accesorios" como nombre para un accesorio.
El problema es que está mapeando sobre el objeto props, no sobre la lista de userList . Intenta hacer lo siguiente:
const Userlist = (props) => { return ( <div> <div id='home-header'> <h1>DevsHelp</h1> </div> <div id='userlist'> // use props.users.map instead of props.map {props.users.map((user) => { return ( <div className='user'> <h3>{user.username}</h3> </div> ) })} </div> </div> )} export default Userlist; y en el componente Home cambie los accesorios de UserList a users , solo para evitar confusiones
<Userlist users={userList}/>