export function Login() { window.addEventListener('load', function () { window.FB.getLoginStatus(function (response) { if (!response.authResponse) { console.log(response); return ( <div id='flex flex-row justify-center pb-100 fb-root'> <button className='btn btn-round btn-lg'>Login</button> </div> ); } else { console.log('UserLoggedIn'); return ( <div id='flex flex-row justify-center pb-100 fb-root'> <button className='btn btn-round btn-lg'>Logout</button> </div> ); } }); }); }Tengo problemas para devolver mi botón que tiene inicio de sesión o cierre de sesión según la respuesta. Estoy usando la función de carga de la ventana para asegurarme de que mis otros scripts se hayan ejecutado primero.
Mensaje de error:
"react-dom.development.js:14169 Uncaught Error: Login(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."Supongo que se supone que esta función es un componente de React. Los componentes de React necesitan devolver algo. Su componente no está devolviendo nada. Según el código anterior, parece que solo desea mostrar el botón una vez que tenga un estado de inicio de sesión. Entonces, en primer lugar, devuelva nulo desde esta función fuera de la función de devolución de llamada window.addEventListener. Esto hará que el error desaparezca, pero no logrará lo que está tratando de hacer. A continuación, agregue un estado isLoading al componente utilizando el enlace useState, cuyo valor predeterminado es verdadero. Luego, envuelva su llamada dewidow.addEventListener dentro de una llamada de useEffect y en lugar de devolver el botón, cambie el estado de isLoading a falso. Probablemente necesitará un segundo objeto de estado para contener el resultado de getLoginStatus. Luego, su componente puede devolver condicionalmente cualquiera de los botones o nulo, según el estado del componente.