使用状态或 uuid 库中的错误？

Question

我正在做一个管理患者预约的项目，一切都很好，直到我安装了 'uuid' 库，该库没有给我带来问题，但从那时起它给了我这个错误，显然它与 useState 有关，但我没有找到它，在此先感谢您！

错误图片...

enter image description here

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;

Answer 1

如果没有合适的沙箱（例如codesandbox），很难确定问题出在哪里。

但错误似乎表明您陷入了无限循环，这通常意味着组件导致其自身的状态依赖关系发生变化，从而导致重绘（再次导致变化等）

我先搬家

    // Eliminando el mensaje previo
    actualizarError(false);

进入

    const actualizarState = e => {
        actualizarCita({
            ...cita,
            [e.target.name]: e.target.value
        })
    }

Answer 2

你无法通过辅助函数更新状态，

actualizarError(false);

你应该删除它，否则无限 re-render

使用状态或 uuid 库中的错误？

error in the usestate or in the uuid library?

javascript

render

project

reactjs

use-state