1

Tengo dos inputs que cambian el texto de una etiqueta P al mismo tiempo, pero el problema es que el render que me muestra siempre es el valor anterior que se guardo. Entiendo que tengo que usar un useEffect para que vuelva a renderizar el componente y muestre el valor actual, pero en el handleChange de los inputs si o si necesito enviarle al SetState que cambia el texto, el valor que se guardo en mi objeto inicial. Hasta ahora estoy aprendiendo React y ya he intentado un monton de cosas, pero nada me funciona, como podria hacer para implementar el useEffect en este caso ? Muchas gracias por la ayuda.

const initialValue = {
 input1: 0,
 input2: 0,
};

const TestState = () => {
 const [obj, setObj] = useState(initialValue);
 const [textChange, setTextChange] = useState("-");

 useEffect(() => {}, [obj]);

 const handleChange = (e) => {
   setObj({ ...obj, [e.target.name]: e.target.value });
   //Basicamente necesito hacer esto -> setTextChange(e.target.value), pero con el valor guardado en el initialValue.
   setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
 };

 return (
   <div style={{ textAlign: "center" }}>
     <form className="test">
       <input type="text" name="input1" onChange={handleChange} />
       <input type="text" name="input2" onChange={handleChange} />
     </form>
     <p className="test_Text">{textChange}</p>
   </div>
 );
};

Dejo un codeSandbox

https://codesandbox.io/s/practical-mahavira-pd94p?file=/src/TestState.js

1 respuesta 1

1

El problema del código pasa aquí:

 const handleChange = (e) => {
   setObj({ ...obj, [e.target.name]: e.target.value });
   //Basicamente necesito hacer esto -> setTextChange(e.target.value), pero con el valor guardado en el initialValue.
   setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
 };

Cuando colocas setObj no se actualiza en el momento que eso se ejecuta, es asíncrono. Por lo que cuando utilizas obj en la línea de abajo, realmente aún no ha cambiado a el valor que declaraste en setObj.

Para poder entrar en el momento en que setObj ya haya cambiado a obj, se utiliza useEffect de la siguiente manera:

useEffect(() => {
  // codigo a ejecutar
}, [/* variables que al cambiar, va a ejecutar el codigo*/])

Entonces sería:

useEffect(() => {
  setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
}, [obj])

De igual manera no es necesario hacer todo eso, puedes cambiar simplemente el handleChange por esto:

  const handleChange = (e) => {
    setTextChange(e.target.value);
  };

y ya funcionaría perfectamente, podrías después borrar todo lo que no se esté ocupando, como obj.

La solución que te hicieron en el codeSandbox no es 100% correcta, dado que están MUTANDO la variable obj de useState, algo que no se debería hacer bajo ningún concepto, debe mantenerse inmutable.

6
  • Creo que alguien modifico el codesandbox no se si se pueda jaja pero el problema original lo puedes ver aca en el codigo, aunque ya me ayudaron en StackOverFlow en ingles. Si quieres la solucion la puedes ver actualizada en el codesandbox. Gracias por tu tiempo. Commented el 11 feb. 2022 a las 17:57
  • Respuesta actualizada, explicando todo. Commented el 11 feb. 2022 a las 18:26
  • 1
    En una hora más te hago el ejemplo del código, pero todo lo que proviene de useState, quiere decir que estamos manejando getters y setters, investiga ese tema y entenderás todo. Pero te lo resumo es que no se debe manipular el un getter con métodos directos a él (ej. getter.pop()), si quieres manipular el getter, tienes que hacer mediante la función setter. (const [esteEsElGetter, esteEsElSetter] = useState() Commented el 11 feb. 2022 a las 19:59
  • 1
    Sí, se me había olvidado tu petición de no usar e.target.value. Para solucionar la mala práctica del código que te hicieron es simplemente modificar la parte const [obj] = useState(initialValue); por const obj = { ...initialValue } y borrar el useEffect si no se está usando. Commented el 11 feb. 2022 a las 21:52
  • 1
    ahh ya entendi, si quiero usar useState no puedo mutar el estado directamente , por lo tanto con tu solucion es como si usara directamente un objeto y ya en vez del usestate innecesario, buenisimo !! Amigaso muchisimas gracias no sabes cuanto aprendi hoy con tu ayuda, voy a repasar todos estos temas que me mencionaste, lo del get, set y la inmutabilidad, gracias !. Commented el 11 feb. 2022 a las 23:49

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.