Je fais un projet pour gérer les rendez-vous des patients et tout allait bien jusqu'à ce que j'installe la bibliothèque 'uuid', la bibliothèque ne m'a pas posé de problème, mais à partir de là, elle m'a donné cette erreur, apparemment c'est avec useState mais non je le trouve, je vous remercie d'avance!

Erreur d'image...

entrez la description de l'image ici

import React, { Fragment, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

const Form = () => {

    //creando el State para las citas
    const [ cita, actualizarCita ] = useState({
        mascota: '',
        propietario: '',
        fecha: '',
        hora: '',
        sintomas: ''
    });

    const [ error, actualizarError ] = useState(false)

    // funcion que se ejecutara cada vez que el usuario escribe en el input para validar lo que hace
    const actualizarState = e => {
        actualizarCita({
            ...cita,
            [e.target.name]: e.target.value
        })
    }

    // Extraer los valores de cita
    const { mascota, propietario, fecha, hora, sintomas } = cita;

    // Cuando el usuario envia el formulario
    const submitCita = e => {
        e.preventDefault();

        // Validacion

        if(mascota.trim() === '' || propietario.trim() === '' || fecha.trim() === '' || hora.trim() === '' || sintomas.trim() === ''){
            actualizarError(true);
            return;
        }
    }

    // Eliminando el mensaje previo
    actualizarError(false);


    // Asignando un ID

    cita.id = uuidv4();

    return (
        <Fragment>

        <h2> Crear Cita </h2>

        { error ? <p className="alerta-error">Todos los campos son obligatorios</p> : null }

        <form
            onSubmit={submitCita}
        >
            <label>Nombre Mascota</label>
            <input
                type="text"
                name="mascota"
                className="u-full-width"
                placeholder="Nombre Mascota"
                onChange={actualizarState}
                value={mascota}
            />

            <label>Nombre Dueño </label>
            <input
                type="text"
                name="propietario"
                className="u-full-width"
                placeholder="Nombre dueño de la mascota"
                onChange={actualizarState}
                value={propietario}
            />

            <label>Fecha </label>
            <input
                type="date"
                name="fecha"
                className="u-full-width"
                onChange={actualizarState}
                value={fecha}
            />

            <label>Hora </label>
            <input
                type="time"
                name="hora"
                className="u-full-width"
                placeholder="Nombre dueño de la mascota"
                onChange={actualizarState}
                value={hora}
            />

            <label>Sintomas</label>
            <textarea
                className="u-full-width"
                name="sintomas"
                onChange={actualizarState}
                value={sintomas}
            ></textarea>

            <button
                type="submit"
                className="u-full-width button-primary"
            >Agregar Cita</button>


        </form>
        </Fragment>
    )
}

export default Form;
0
Guillermo Sequera 29 août 2020 à 03:38

2 réponses

Meilleure réponse

Vous ne pouvez pas mettre à jour l'état en dehors de la fonction,

actualizarError(false);

Vous devriez supprimer ceci, sinon re-rendu infini

0
sivarasan 29 août 2020 à 03:47

Il est difficile de savoir quel pourrait être le problème sans un bac à sable adéquat (codesandbox par exemple).

Mais l'erreur semble indiquer que vous êtes resté coincé dans une boucle infinie, ce qui signifie généralement que le composant provoque la modification de ses propres dépendances d'état, ce qui provoque un redessiner (ce qui provoque à nouveau un changement, etc.)

Je commencerais par bouger

    // Eliminando el mensaje previo
    actualizarError(false);

Dans

    const actualizarState = e => {
        actualizarCita({
            ...cita,
            [e.target.name]: e.target.value
        })
    }
0
Stanislas 29 août 2020 à 00:54