es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obteniendo datos de API con React

25 Jul, 2023 Programación

Entonces estoy tratando de obtener datos de mi API y puedo enviarlos a la consola, pero no puedo mostrarlos en mi aplicación usando useState. Intenté algo así y ignora por completo mi h2.

var id = "61bf209bdb079818ec63d9fd";

const Main = () => {
    const [name, setName] = useState("");
    const [fromApi, setFromApi] = useState([]);

const getApiData = () => {
    fetch('http://localhost:3000/myapi')
        .then(res => {
            return res.json();
        })
        .then(data => {
            console.log(data);
            setFromApi(data);
        })

    for (var i = 0; i < fromApi.length; i++) {
        if (fromApi[i]._id === id) {
            setName(fromApi[i].name);
        }
    }
}

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

return (
    <div>
        {name && <h2 classname='urname'>Tu nombre: {name}</h2>}
    </div>
)
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con este código es que el bucle for que verifica el nombre correspondiente al id proporcionado se ejecuta antes que la función getApiData realmente obtenga y establezca los datos de la API. Por lo tanto, el estado fromApi sigue siendo una matriz vacía cuando se ejecuta el bucle, lo que no devuelve ningún resultado para name.

    Para solucionar esto, debes mover el bucle for dentro del segundo bloque then, después de la línea setFromApi(data). De esta manera, el bucle solo se ejecuta después de que los datos de la API se hayan obtenido y establecido en fromApi.

    El código corregido se vería así:

    var id = "61bf209bdb079818ec63d9fd";

const Main = () => {
    const [name, setName] = useState("");
    const [fromApi, setFromApi] = useState([]);

    const getApiData = () => {
        fetch('http://localhost:3000/myapi')
            .then(res => {
                return res.json();
            })
            .then(data => {
                console.log(data);
                setFromApi(data);
                for (var i = 0; i < data.length; i++) {
                    if (data[i]._id === id) {
                        setName(data[i].name);
                        break;
                    }
                }
            })
    }

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

    return (
        <div>
            {name && <h2 classname='urname'>Tu nombre: {name}</h2>}
        </div>
    )
}

    Ten en cuenta que también agregué una declaración break dentro del bloque if, para que el bucle se detenga después de encontrar el objeto correspondiente y no siga buscando innecesariamente.

Comments are closed.