Estoy teniendo problema con el renderizado de un objeto en React. Por algún motivo, de 5 elementos que tiene, sólo me renderiza 3. Lo he comprobado en consola, y me ocurre lo siguiente:
Por algún motivo inicialmente me aparece que el array tiene 3 elementos, pero si lo despliego me aparecen 5. Justamente los elementos que se renderizan son los 3 primeros. Dejo también el componente de React por si pudiera ser de ayuda:
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import './RegisterBlock.css';
const RegisterBlock = () => {
const [gamertag, setGamerTag] = useState("");
const [password, setPassword] = useState("");
const [repassword, setRepassword] = useState("");
const [mail, setMail] = useState("");
const [isChecked, setIsChecked] = useState(false);
const [errors, setErrors] = useState(null);
const handleChange = (event) => {
event.target.name === "password" ? setPassword(event.target.value) :
event.target.name === "repassword" ? setRepassword(event.target.value) :
event.target.name === "gamertag" ? setGamerTag(event.target.value) :
event.target.name === "email" ? setMail(event.target.value) : setIsChecked(!isChecked) ;
}
const handleSubmit = (event) => {
event.preventDefault();
var totalErrors = [];
if (gamertag.length === 0 || gamertag.length > 30) {
totalErrors.push({"error": "La contraseña debe tener entre 2 y 30 caracteres"});
}
if (!/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(mail)) {
totalErrors.push({"error": "Introduce un correo válido"});
}
if (!isChecked) {
totalErrors.push({"error": "Debes aceptar haber leído las políticas para poder registrarte"});
}
const url = "URL API" + mail;
fetch(url)
.then(response => response.json())
.then(data => {
data.length > 0 && totalErrors.push({"error": "Ya hay una cuenta con este correo"});
});
const urlGamertag = "URL API" + gamertag;
fetch(urlGamertag)
.then(response => response.json())
.then(data => {
data.length > 0 && totalErrors.push({"error": "El gamertag ya ha sido usado por otro usuario"});
});
setErrors(totalErrors);
}
useEffect(() => {
if (errors?.length === 0) {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: gamertag,
password: password,
email: mail
})
};
fetch('URL API', requestOptions)
.then(response => response.json())
}
}, [errors?.length === 0])
return (
<div className="login-block">
<div className="wrapper">
<form onSubmit={handleSubmit} method="post">
<input type="text" placeholder="Gamertag" name="gamertag" value={gamertag} onChange={handleChange}/>
<input type="mail" placeholder="Email" name="email" value={mail} onChange={handleChange}/>
<input type="password" placeholder="Contraseña" name="password" value={password} onChange={handleChange}/>
<input type="password" placeholder="Verifica contraseña" name="repassword" value={repassword} onChange={handleChange}/>
<div className="form__checkbox">
<input onChange={handleChange} name="policy" id="policy" type="checkbox" checked={isChecked} />
<label htmlFor="policy">Al registrarte confirmas haber leído la <Link to="/politica-de-privacidad">Política de privacidad</Link> y Aviso legal.</label>
</div>
{console.log(errors)}
{
errors?.length > 0 && (
<ul className="form--errors">
{
errors.map((item, index) => {
return <li key={index}>{item.error}</li>
})
}
</ul>
)
}
<input type="submit" value="Registrarse"/>
</form>
</div>
</div>
)
}
export default RegisterBlock;
.push
al arraytotalErrors
dentro de losfecth
. Aparentemente no se puede actualizar un array dentro de una promesa que fue definido afuera de esta. En esta pregunta en inglés se da una posible solución a ese problema: How to push data from fetch() to array in Javascript using a for loop?