Así que recientemente comencé a descubrir ReactJS. Tengo una API Spring Boot simple que tiene algunos métodos. Uno de estos devuelve una lista de objetos. Los obtengo en mi interfaz usando Axios para hacer la llamada HTTP.
export function getItems() { const [items, setItems] = useState([]); useEffect(async () => { await client.get('items').then((result) => { setItems(result.data); }); }, []); return items;Los elementos se asignan en un componente de galería y se muestran en la pantalla. Además de esto, tengo una función addItem que publica un objeto de elemento obtenido a través de un formulario en mi API.
export async function addPet(newPet) { await client.post( '/pets', newPet, ); }Mi componente AddPet está cargado dentro de mi componente Galería. El formulario se muestra en el lado derecho de la pantalla y cuando hago clic en el botón "Agregar elemento", quiero que se agregue el elemento y que se vuelva a cargar mi lista de elementos para mostrar el elemento recién agregado. En este momento, no puedo hacer que esto funcione de manera correcta. Si elimino el "[]" de la parte final de mi useEffect() en mis funciones getItems(), todo parece funcionar, pero en realidad la aplicación está haciendo la llamada a getItems una y otra vez. Si agrego "[]", la llamada solo se realiza una vez al principio, pero no volverá a representar el componente de la galería cuando se agregue un elemento. El handleSubmit() para mi botón "Agregar elemento" es el siguiente:
const handleSubmit = () => { const newItem = new Item(); newItem .name = formValue.name; newItem .image = formValue.image; newItem .pitemText = formValue.itemText; addItem(newItem); };Entonces, mi pregunta aquí es: ¿cómo puedo hacer que ese componente de la galería se vuelva a renderizar cada vez que agrego un elemento nuevo o elimino uno de los elementos? Me imagino que necesito una forma de cambiar el estado del componente, pero parece que no puedo hacerlo.
El segundo parámetro de useEffect (el Array ) tiene un papel importante: los elementos en ese arreglo activan el useEffect para volver a ejecutar.
Algunos casos:
useEffect(() => {}, []) : se ejecuta una vez, después de montar el componenteuseEffect(() => {}, [var1, var2,..., varn]) : se ejecuta cuando se actualiza var1 o var2 o varnuseEffect(() => {}) : se ejecuta en cada renderizado completado (comportamiento predeterminado) Más sobre useEffect : gancho useEffect
Entonces, su código funciona como se esperaba:
useEffect(() => { client.get('items').then((result) => { setItems(result.data); }); }, []); // -> runs once, when component is mounted useEffect(() => { client.get('items').then((result) => { setItems(result.data); }); }, [item]); // -> runs when the variable named item changes necesita organizar su código de tal manera que este useEffect pueda ejecutarse en la actualización de la variable cuyo cambio desea ver.
no ponga async como el primer parámetro de useEffect hook como se muestra a continuación, no funcionará bien
useEffect(async () => { await client.get('items').then((result) => { setItems(result.data); }); }, []);en su lugar, puede usar la función externa o la función IIEF como se muestra a continuación
useEffect(() => { (async () => { await client.get('items').then((result) => { setItems(result.data); }); })() }, []);