No entiendo por qué este código es un bucle infinito. Esto es porque actualizo mi estado en otra condición. Pero me gustaría actualizar una serie de direcciones URL cuando obtenga una nueva respuesta de API.
import React, { useState, useEffect } from 'react'; function getShortenUrl() { const [urls, setUrls] = useState([]) const [error, setError] = useState(null); const [items, setItems] = useState({}); useEffect(() => { fetch("https://api.shrtco.de/v2/shorten?url=https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array") .then(res => res.json()) .then( (result) => { setItems(result); }, (error) => { setError(error); } ) }, []) if (error) { return <div>Error : {error.message}</div>; } else if (!items.result) { return <div>Loading...</div>; console.log("no item"); } else { setUrls([urls, items]); console.log("items", items); console.log("urls", urls); return <ul> {items.result.short_link}</ul>; } } export default getShortenUrl;Estoy un poco perdido cuando se trata de estado en realidad. No entiendo cómo puedo crear una matriz de URL y poder usarla en otros componentes.
Puede que tengas algunos errores aquí.
.then( (result) => { setItems(result); }, (error) => { setError(error); } )cambiarlo en
.then((result) => { setItems(result); setUrls([...urls, result]) }) .catch((error) => { setError(error); }) Y también elimine la línea setUrls([urls, items]);
Intente usar una representación condicional en lugar de una declaración if else :
import React, { useState, useEffect } from 'react'; function getShortenUrl() { const [urls, setUrls] = useState([]) const [error, setError] = useState(null); const [items, setItems] = useState({}); useEffect(() => { fetch("https://api.shrtco.de/v2/shorten?url=https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array") .then(res => res.json()) .then( (result) => { setItems(result); }, (error) => { setError(error); } ) }, []) return ( <> {error&& <div>Error : {error.message}</div>} {!items.result && <div>Loading...</div> } {items.result && <ul> {items.result.short_link}</ul>} </> ) } export default getShortenUrl;Si es nuevo en reaccionar, hacemos el estado de carga para la recuperación de la llamada API y está configurando el estado en otro lugar y cuando el estado actualiza el componente se vuelve a procesar, por lo que en cada componente se vuelve a procesar, está actualizando el estado que está causando un bucle infinito. Prueba esto
import React, { useState, useEffect } from 'react'; function getShortenUrl() { const [urls, setUrls] = useState([]) const [error, setError] = useState(null); // const [items, setItems] = useState({}); // remove it because you are using urls and items state for same purposes const [loading,setLoading]=useState(false); useEffect(() => { setLoading(true); fetch("https://api.shrtco.de/v2/shorten?url=https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array") .then(res => res.json()) .then( (result) => { // setItems(result); // remove it setUrls(result); setLoading(false); }, (error) => { setError(error); setLoading(false); } ) }, []) if(loading){ return <div>Loading...</div>; } if (error) { return <div>Error : {error.message}</div>; } else { return <ul> {urls?.result?.short_link}</ul>; } } export default getShortenUrl;