Tengo un Alice-Carousel en reacción donde obtengo los elementos de una API. Después de obtener los datos de la API, actualizo la matriz de elementos para el carrusel pero obtengo el valor de los elementos como indefinido. CryptoState es el contexto para evitar la perforación de puntales.
import React from 'react' import { useEffect ,useState} from 'react'; import { CryptoState } from '../CryptoContext' import { TrendingCoins } from '../api'; import axios from 'axios' import AliceCarousel from 'react-alice-carousel'; import {Link} from 'react-router-dom' const Carousel = () => { const [trending,setTrending] = useState([]); const {currency,setCurrency} = CryptoState(); useEffect(() => { const {data}= axios.get(TrendingCoins(currency)); setTrending(data); },[currency,trending]) // 0 pe 2 items dikhane hai, 512 size pe 4 items dikhane hai, // thats all about responsiveness. const responsives = { 0: { items: 2 }, 512: { items: 4 } } const items= trending.map((coin) => { return ( <> <Link to={`/coins/${coin.id}`}/> <img className="carouselImages" src={coin?.image} height="80" style={{marginBottom:10}} /> </> ) }) return ( <AliceCarousel infinite mouseTracking autoPlayInterval={1000} animationDuration={1500} disableDotsControls responsive={responsives} autoPlay items={items} /> ) } export default CarouseluseEffect(()=>{ const getData = async () => { try{ const {data} = await axios.get(TrendingCoins(currency)); setTrending(data); }catch{} } getData() }, [currency, trending]) no está esperando la respuesta, también puede escribir async en la función de flecha useEffect
editar. : https://devtrium.com/posts/async-functions-useeffect
const {data}= axios.get(TrendingCoins(currency));el problema es que axios.get es una llamada asíncrona, por lo que básicamente no está esperando su resultado, podría sincronizar/esperar o prometer
useEffect(async ()=>{ const response = await axios.get(TrendingCoins(currency)); setTrending(response.data); },[currency,trending])Axios es asíncrono, lo que significa que la aplicación debe esperar a que se entreguen los datos. Una de las formas de hacerlo es mediante el uso de Thenables.
Hay algunos problemas con las dependencias de useEffect() . Si agrega trending como una dependencia, habrá un bucle infinito que probablemente hará que el navegador se bloquee. Esto se debe a que el useState vuelve a representar el componente y cambia el estado y los desencadenadores useEffect cuando cambia un valor de dependencia.
En la return también hay que hacer cambios. Si la App no tiene los datos disponibles, no puede mostrarlos. Para resolver esto necesitamos usar sentencias condicionales.
Echar un vistazo
import React from 'react' import { useEffect ,useState} from 'react'; import { CryptoState } from '../CryptoContext' import { TrendingCoins } from '../api'; import axios from 'axios' import AliceCarousel from 'react-alice-carousel'; import {Link} from 'react-router-dom' const Carousel = () => { const [trending,setTrending]=useState([]); const {currency,setCurrency}=CryptoState(); useEffect(()=>{ axios.get(TrendingCoins(currency)) .then((data) => { setTrending(data) }) .catch((error) => { console.log(error) }) },[currency]) const responsives={ //0 pe 2 items dikhane hai, 512 size pe 4 items dikhane hai,thats all about responsiveness. 0:{ items:2, }, 512:{ items:4, } } const items = trending.map((coin)=>{ return ( <> <Link to={`/coins/${coin.id}`}/> <img className="carouselImages" src={coin?.image} height="80" style={{marginBottom:10}} /> </> ) }) if(trending === undefined) return (<p>Loading data....</p>) else return ( <AliceCarousel infinite mouseTracking autoPlayInterval={1000} animationDuration={1500} disableDotsControls responsive={responsives} //responsive is to generate responsiveness.... autoPlay items={items} /> ) } export default Carousel