Los valores del estado de gancho no son accesibles en función de Click

Hice un componente de forma, que tiene su propio componente de campos de entrada, y usé antojo para diseñar, pero al utilizar el estado de gancho me enfrenté a algunos problemas con respecto al acceso a los valores de los estados de gancho.

Hice estos campos de entrada usando state[login] pasarlos a mi componente de forma y el componente de forma los está haciendo map función.

Pero, no puedo acceder a ellos en el onclick función.

import React, { useEffect, useState } from "react";
import Form from "../../Components/Form/Form";
import Layout, { Content } from "antd/lib/layout/layout";
import { Card } from "antd";
import "./login.css";
    
const Fun = (props) => {
  const [semail, setEmail] = React.useState("");
  const [spass, setpass] = useState("");

  const handleEmail = (event) => {
    setEmail(event.target.value);
  };
  const handlePass = (event) => {
    setpass(event.target.value);
    console.log("val", event.target.value);
  };
  console.log("Email and password is", semail, spass); ///but here they are

  const handleButton = () => {
    ///the hook state values are not accesible in this function
    console.log("Email and password is", semail, spass);
  };
  ///why is this happening and how can i access them in the onclick function
  ////I made these input fields using state[login] passing them to my form compnent and the form  component is rendreing them using map function....
  const [login] = useState({
    log: [
      {
        type: "Inputfield",
        name: "email",
        label: "Your-Email",
        placeholder: "Enter your Email",
        onChange: handleEmail,
        rules: [
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ],
      },
      {
        type: "Inputfield",
        name: "password",
        label: "Password",
        placeholder: "Enter your Password",
        onChange: handlePass,
        rules: [{ required: true, message: "Please input your Password!" }],
      },
      {
        type: "Button",

        variant: "primary",
        size: "default",
        placeholder: "Login",
        onClick: handleButton,
      },
    ],
  });
    
  return (
    ///and here i am returning my inputfiels by passing them as props to my custom built  components
    

); }; export default Fun;

Pregunta hecha hace 3 años, 4 meses, 7 días - Por codecatalyst


2 Respuestas:

  • El problema que estás experimentando es que al definir los campos de entrada en un objeto de estado y luego renderizarlos con un mapeo en tu componente Form, los valores de estado de esos campos no están disponibles en la función handleButton que se ejecuta en el evento onClick del botón.

    Para solucionar este problema, puedes reorganizar un poco tu lógica para asegurarte de que los valores de estado estén disponibles en la función handleButton. Una forma de lograrlo es utilizando useRef para almacenar una referencia a los valores de estado de los campos de entrada y luego acceder a esos valores en la función handleButton.

    Aquí tienes una posible solución:

    jsx
    import React, { useEffect, useState, useRef } from "react";
    import Form from "../../Components/Form/Form";
    import { Card } from "antd";
    import "./login.css";
    
    const Fun = (props) => {
      const emailRef = useRef("");
      const passRef = useRef("");
    
      const handleEmail = (event) => {
        emailRef.current = event.target.value;
      };
    
      const handlePass = (event) => {
        passRef.current = event.target.value;
      };
    
      const handleButton = () => {
        console.log("Email and password is", emailRef.current, passRef.current);
      };
    
      const [login] = useState({
        log: [
          {
            type: "Inputfield",
            name: "email",
            label: "Your-Email",
            placeholder: "Enter your Email",
            onChange: handleEmail,
            rules: [
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
              {
                required: true,
                message: "Please input your E-mail!",
              },
            ],
          },
          {
            type: "Inputfield",
            name: "password",
            label: "Password",
            placeholder: "Enter your Password",
            onChange: handlePass,
            rules: [{ required: true, message: "Please input your Password!" }],
          },
          {
            type: "Button",
            variant: "primary",
            size: "default",
            placeholder: "Login",
            onClick: handleButton,
          },
        ],
      });
    
      return (
        
    ); }; export default Fun;

    En esta modificación, utilizamos useRef para almacenar las referencias a los valores de los campos de entrada y luego accedemos a estos valores en la función handleButton. De esta manera, los valores de los campos de entrada estarán disponibles para su uso en la función handleButton.

    Respondida el Dec 18, 2020 a las 11:45 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que estás intentando acceder a las variables de estado semail y spass dentro de la función handleButton, que es un controlador de eventos. Los controladores de eventos se ejecutan de forma asíncrona, por lo que para cuando se ejecuta handleButton, el estado puede haber cambiado.

    Para resolver este problema, puedes usar una función de flecha en el controlador de eventos, que capturará el valor actual del estado:

    
    const handleButton = () => {
      // Captura el valor actual del estado
      const { semail, spass } = useState();
    
      // Imprime los valores del estado
      console.log("Email y contraseña:", semail, spass);
    };
    

    Alternativamente, puedes usar el estado directamente en el controlador de eventos, pero debes envolverlo en una función para evitar problemas de cierre:

    
    const handleButton = () => {
      // Envuelve el estado en una función para evitar problemas de cierre
      const logState = () => {
        console.log("Email y contraseña:", semail, spass);
      };
    
      // Llama a la función para imprimir los valores del estado
      logState();
    };
    

    Espero que esto ayude! Avísame si tienes alguna otra pregunta.

    Respondida el Dec 18, 2020 a las 11:49 - por Gemini

    Votos positivos: 0 | Votos negativos: 0