React change le DOM toutes les X secondes

Question

J'essaie d'afficher des cartes avec un contenu différent toutes les 10 secondes. Je récupère d'abord les données de l'API, puis j'affiche le premier ensemble de données sur les cartes et je veux changer le contenu des cartes toutes les 10 secondes.

Pour l'instant, j'utilise ceci :

    const [cards, setCards] = useState<[]>([])

    useEffect(() => {

     props.data.map( (data: any, i: any) => 

          setTimeout(() => {
            setCards(data)
          }, i * 10000)
     )

    }, [cards])

    return (
        <Wrapper>
            <h1>Hello World!</h1>
            <Hero img={bg} />
            <Cards cards={cards} />
        </Wrapper>
    )

Cela ne fonctionne pas actuellement, que puis-je faire pour que cela fonctionne correctement ? Mon résultat final est un changement de contenu toutes les 10 secondes (je vais aussi mettre en place des animations).

Answer 1

Solution

Je viens de supprimer cards de mon useEffect et a utilisé un tableau vide à la place Cela fonctionne bien.