如何在反应中重复 function

Question

I need a repeating function in react. I have an array of words and an element which I want to change every 2 seconds to the following item of the array and again and again. If the array ends, start over. I tried this code:

  const words = ['Hi', 'Gutten Tag', 'Hola', 'Bonjour']
  const [word, updateWord] = useState(0) // The word would be accessible at words[word] 

  function handleLoop() {
    if (word === words.length - 1) {
      updateWord(0)
    }
    else {
      updateWord(word + 1)
    }
    setTimeout(handleLoop(), 2000)
  }

But react thinks that it will cause an infinite loop.

How should I fix it?

Answer 1

Use useEffect hook

You can have the useEffect hook triggered after every 2 seconds by updating the word and specifying it in the dependency list.

 const { useEffect, useState } = React; // keep words in a separate constants.js file // if it's a constant and not consumed from an API const words = ["Hi", "Gutten Tag", "Hola", "Bonjour"]; const App = () => { // maintain word as a local state const [word, updateWord] = useState(0); // hook will be triggerd every time word // gets updated after every 2000ms useEffect(() => { let nextWord; // logic stays the same if (word === words.length - 1) { nextWord = 0; } else { nextWord = word + 1; } // update the word setTimeout(() => updateWord(nextWord), 2000); }, [word]); return ( <p>{words[word]}</p> ); } ReactDOM.render(<App />,document.getElementById('react'));

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Answer 2

Stackoverflow occurs

Fix:

 const words = ['Hi', 'Gutten Tag', 'Hola', 'Bonjour']
 const [word, updateWord] = useState(0) // The word would be accessible at words[word] 

 function handleLoop() {
   if (word === words.length - 1) {
     updateWord(0)
   }
   else {
     updateWord(word + 1)
   }
 }

 setInterval(handleLoop, 2000)

Answer 3

I think setInterval is better way, here

const words = ['Hi', 'Gutten Tag', 'Hola', 'Bonjour']
const [word, updateWord] = useState(0) // The word would be accessible at words[word] 

let handleLoop = function() {
    if (word === words.length) {
      updateWord(0)
    }
    else {
      updateWord(word + 1)
    }
    console.log(words[word])
  }

 setInterval(handleLoop, 2000)

Answer 4

function countDown(fromNumber) {
    console.log(fromNumber);

    let nextNumber = fromNumber - 1;

    if (nextNumber > 0) {
        countDown(nextNumber);
    }
}
countDown(3);

 function countDown(fromNumber) { console.log(fromNumber); let nextNumber = fromNumber - 1; if (nextNumber > 0) { countDown(nextNumber); } } countDown(3);