0

error del arreglo

Estoy intentando hacer una lista en envíos en React, pero la lista en consola no está actualizada con los datos reales del arreglo; el último elemento no se actualiza, en este caso el item "7" aparece después que agregue el "8".

Necesitaría que el link se creara con todos los elementos del arreglo.

import { useRef, useState } from "react";

export const App = () => {
  const [link, setLink] = useState([]);
  const [guias, setGuias] = useState([]);
  const guiaInput = useRef();
  let guia;

  const handleInput = (e) => {
    e.preventDefault();
    guia = guiaInput.current.value; //Obtener valor del input
    setGuias([...guias, guia]); // Agregar valor al arreglo
    setLink(`https://www.hekaentrega.co/inter/imprimirManifiesto/${guias}`); //Agregar Arreglo al link
    guiaInput.current.value = ""; // Vaciar input
    console.log(guias);
  };

  return (
    <>
      <div className="app">
        <div>
          <h1>Consolidado de envios</h1>
          <form onSubmit={handleInput} className="input-group">
            <input
              className="form-control"
              type="text"
              ref={guiaInput}
              autoFocus
              required
            />
          </form>
        </div>
        <div className="guias">
          <ul>
            {guias.map((item, k) => {
              return <li key={k}>{item}</li>;
            })}
          </ul>
        </div>
        <div className="linkInfo">
          <p>Llevas {guias.length - 1} guias </p>
          <a href={link} target="_blank">
            Crear {">"}
          </a>
        </div>
      </div>
    </>
  );
};

2 respuestas 2

0

En la función handleInput estas cambiando el estado en el que esta la lista, pero cuando haces el console.log() estas imprimiendo la lista antes de que se actualice, para imprimir la lista cada que se actualice bien puedes simplemente poner el console.log fuera de la función, pero si quieres hacer algo con la lista cada que se actualice deberías usar un useEffect

No estoy muy seguro, pero, cada que se ejecuta la función para cambiar el estado no quiere decir que la variable que contiene el valor del estado se actualice instantáneamente, tienes que esperar que el componente se vuelva a renderizar en el virtual DOM.

const handleInput = (e) => {
    e.preventDefault();
    guia = guiaInput.current.value;
    setGuias([...guias, guia]);
    setLink(`https://www.hekaentrega.co/inter/imprimirManifiesto/${guias}`); 
    guiaInput.current.value = "";


    // esto debería ir fuera de la función y dentro del componente 
    // para que se ejecute cuando se vuelva a renderizar
    console.log(guias); 
  };
1
  • El useEffect debería usarse para tareas asíncronas y no como observables para variables. Commented el 28 ago. 2023 a las 7:45
0

Para poder ver en consola la nueva lista que se estaría generando podrías añadir el console.log dentro del callback que recibe el setGuias para actualizar el estado. De esta forma generas el nuevo listado, lo escribes en consola y se asigna a la variable guias con el correspondiente rerender.

Por otra parte se está inicializando los links como un Array pero en el setLink se asigna un string.

const handleInput = (e) => {
    e.preventDefault();
    const guia = guiaInput.current.value
    setGuias(previousGuides => {
        const guidesList = [...previousGuides, guia];
        console.log({ guides: guidesList });
        return guidesList;
    }); 
    setLink(`https://www.hekaentrega.co/inter/imprimirManifiesto/${guias}`);
    guiaInput.current.value = "";
  };

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.