1

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:

introducir la descripción de la imagen aquí

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;
1

2 respuestas 2

0

Podrías intentar mover a setErrors(totalErrors) al fetch(urlGamertag) para que tome el valor más reciente retornado de la promesa.

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) // aqui
    });

 /* setErrors(totalErrors); // mover arriba  */ 

Saludos!

0

Promise All

El patrón recomendado para cuando hay mas de una operación asincrónica de tipo `fetch API`, como en este caso, es usar `promise.all` esto garantiza lo siguiente:
  • La resolución de cada una de las promesas involucradas.
  • El orden en que se ejecutan las operaciones asincronicas

En el siguiente demo, se implementa una solución muy parecida al caso de uso:

function App(){
  const [error, setError] = React.useState();

  function handle_async(){
    let totalErrors=[];
    
    totalErrors.push({"error":"uno"})
    totalErrors.push({"error":"dos"})
    totalErrors.push({"error":"tres"})
    
    const p1 = fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
    const p2 = fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
  
    Promise.all([p1, p2]).then(values => {
       //extraes el valor que necesites evaluar con if
       //para cada elemento en values, que es el resultado de 
       //su correspondiente promesa
       //console.log(values[0].length); 
       //console.log(values[1].length);
       totalErrors.push({"error":"cuatro"});
       totalErrors.push({"error":"cinco"});
       setError(totalErrors);
    });

    //console.log(totalErrors);
   }
   //console.log(error);
   return (
      <div>
        <button onClick={handle_async}>Click me</button>
         <pre>{JSON.stringify(error, null, 2)}</pre>
     </div>)
  }

  ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>


Soluciones con problemas race condition fecth API

Async race condition:

  • No hay garantía de la resolución de las operaciones asincronicas.
  • Si hay n operaciones asincronicas, la secuencia de ejecución es incierta.

fetch API tiene su propio Memory allocation además, es posible crear trailing closure sobre variables declaradas (totalErrors) en el outter scope (handleSubmit) y modificar sus valores en consecuentes llamadas a fecth; siempre y cuando estas llamadas consecutivas esten en el mismo outter scope, justo como en este caso.

Sin embargo, la siguiente solución es propensa a errores de tipo async race condition:

function App(){
  const [error, setError] = React.useState();

  function handle_async(){
    //ReactJS: handle scope esta en mi memory space
    let totalErrors=[];
    //todas las operaciones push en este scope
    //afectan a las vars de mi memory space
    totalErrors.push({"error":"uno"})
    totalErrors.push({"error":"dos"})
    totalErrors.push({"error":"tres"})
    //fetch es una operacion async
    //crea otro memory space
    //necesito continuar el programa
    //dentro de ese memory space
    //para eso uso la funcion de continuacion then
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        //fetch API: registro nueva variable
        //en este scope, toralErrors
        //esta operacion push no se realiza
        //en el scope de react
        //solo en el scope de fecth API
        //ademas forma un trailing closure
        //con el parent scope, donde ya tiene
        //3 valores asignados
        totalErrors.push({"error":"cuatro"});
      });
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
       //fetch API: registro nueva variable
        //en este scope, toralErrors
        //esta operacion push no se realiza
        //en el scope de react
        //solo en el scope de fecth API
        //ademas forma un trailing closure
        //con el parent scope, donde ya tiene
        //3 valores asignados
        totalErrors.push({"error":"cinco"});
        //actualizo el estado de errors en reactjs
        //termina pasa el nuevo valor de errors
        //a reactJS que devolvera el componente nuevamente
        setError(totalErrors);
       
      });

    //console.log(totalErrors);
  }
  //console.log(error);
  return (
    <div>
    <button onClick={handle_async}>Click me</button>
    <pre>{JSON.stringify(error, null, 2)}</pre>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Nótese que al dar click en el botón varias veces, en algunas se omite el valor {"error":"cuatro"}.


Ahora, puede que la situación demostrada anteriormente se resuelva, si se usa el setter de useState en el fetch donde se realiza el push de {"error":"cuatro"}:

function App(){
  const [error, setError] = React.useState();

  function handle_async(){
    //ReactJS: handle scope esta en mi memory space
    let totalErrors=[];
    //todas las operaciones push en este scope
    //afectan a las vars de mi memory space
    totalErrors.push({"error":"uno"})
    totalErrors.push({"error":"dos"})
    totalErrors.push({"error":"tres"})
    //fetch es una operacion async
    //crea otro memory space
    //necesito continuar el programa
    //dentro de ese memory space
    //para eso uso la funcion de continuacion then
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        //fetch API: registro nueva variable
        //en este scope, toralErrors
        //esta operacion push no se realiza
        //en el scope de react
        //solo en el scope de fecth API
        //ademas forma un trailing closure
        //con el parent scope, donde ya tiene
        //3 valores asignados
        totalErrors.push({"error":"cuatro"});
        //actualizo el estado de errors en reactjs
        //termina pasa el nuevo valor de errors
        //a reactJS que devolvera el componente nuevamente
        setError(totalErrors);
      });
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
       //fetch API: registro nueva variable
        //en este scope, toralErrors
        //esta operacion push no se realiza
        //en el scope de react
        //solo en el scope de fecth API
        //ademas forma un trailing closure
        //con el parent scope, donde ya tiene
        //3 valores asignados
        totalErrors.push({"error":"cinco"});
        //actualizo el estado de errors en reactjs
        //termina pasa el nuevo valor de errors
        //a reactJS que devolvera el componente nuevamente
        setError(totalErrors);
       
      });

    //console.log(totalErrors);
  }
  //console.log(error);
  return (
    <div>
    <button onClick={handle_async}>Click me</button>
    <pre>{JSON.stringify(error, null, 2)}</pre>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Pero no, ahora al dar click en el botón en varias ocasiones, se puede ver {"error":"cuatro"} y {"error":"cinco"}, o tal vez solo {"error":"cuatro"} y viceversa, el resultado de las operaciones fetch tampoco llegan siempre en el mismo orden en que fueron declaradas.

promise.all

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.