Estoy tratando de extraer datos de una base de datos y comparar los valores de la base de datos con el usuario que inició sesión. El código que estoy usando para verificar esto se ve así:
const [records, setRecords] = useState([]); const [email, SetEmail] = useState([]); // This method fetches the records from the database. useEffect(() => { async function getRecords() { const response = await fetch(`http://localhost:5000/admin/`); if (!response.ok) { const message = `An error occurred: ${response.statusText}`; window.alert(message); return; } const admin = await response.json(); setRecords(admin); let emailList = []; admin.forEach((x) => { emailList.push(x.email); return emailList; }, SetEmail(emailList)); } getRecords(); return () => { }; }, []); console.log(email); console.log(email.includes("xxx@yahoo.com")); El problema con esto es que console.log(email) devuelve varias matrices vacías antes de devolver la completamente adjunta, de modo que si comparo el correo electrónico registrado actual con el correo electrónico en la base de datos obtengo: falso, falso ... verdadero. Hacer que mi componente no se pueda leer.
Necesitaba usar la función map() en su lugar
Como está convirtiendo 1 matriz en otra con la misma cantidad de entradas, puede usar un mapa.
Trate console.log como efectos secundarios también y colóquelos dentro de useEffects
const [records, setRecords] = useState([]); const [email, SetEmail] = useState([]); // This method fetches the records from the database. useEffect(() => { async function getRecords() { const response = await fetch(`http://localhost:5000/admin/`); if (!response.ok) { const message = `An error occurred: ${response.statusText}`; window.alert(message); return; } const admin = await response.json(); const emailList = admin.map(x => x.email); setRecords(admin); SetEmail(emailList)); } getRecords(); return () => { }; }, []); useEffect(() => { console.log(email); console.log(email.includes("xxx@yahoo.com")); },[email]);