Tengo tres componentes: diseño, navegación y menú desplegable de habitaciones. Layout obtiene una propiedad 'lobbyCode' de una base de datos y lo establece en un estado, luego lo pasa como accesorio a Navigation. Luego, la navegación pasa este accesorio como un accesorio a RoomDropdown, sin embargo, el componente desplegable de la habitación no se vuelve a representar cuando se cambia el estado de lobbyCode en el diseño. La navegación parece manejar bien el cambio de estado y se vuelve a renderizar correctamente, por lo que no estoy seguro de lo que está sucediendo.

Diseño:

 const { user, isAuthenticated, isLoading } = useAuth0(); const [lobbyCode, setLobbyCode] = useState(""); return ( <div> <Navigation GetUser={GetUser} GetPlayers={GetPlayers} lobbyCode={lobbyCode} user={user} isAuthenticated={isAuthenticated} isLoading={isLoading} /> </div> ) useEffect(() => { if (isAuthenticated) { GetUser(user.email).then(result => { if (result.length > 0) { setLobbyCode(result[0].lobby); } }); } }, [user]);

Navegación:

 <RoomDropdown lobbyCode={props.lobbyCode} GetUser={props.GetUser} GetPlayers={props.GetPlayers} user={props.user} />

HabitaciónDesplegable

 useEffect(() => { console.log(props.lobbyCode); }, [props.lobbyCode]);

El resultado es que el menú desplegable de la sala se imprimirá sin definir y nunca se actualizará, incluso una vez que se cargue el código de la sala.