应该每次返回不同值的 function 在反应中不起作用

Question

I am working on my portfolio, but when I reach the experiences page I tried to create a title that has it's middle part change every second, and value of it must come from an already set up array, but when I run the code it always return the first string of the array, can anyone please fix this problem for me?

const projectsTitleKeyWords = ['responsible', 'meaningful', 'beautiful']
let titlep2 = 'test'
let index = 0

const change = () => { 
  titlep2 = projectsTitleKeyWords[index]
  index = ++index % projectsTitleKeyWords.length
  setTimeout(change, 1000)
}
change()
console.log(titlep2)


const titlep1 = 'I creat '
const titlep1Array = titlep1.split('')
let titlep2Array = titlep2.split('')
const titlep3 = ' projects'
const titlep3Array = titlep3.split('')

the value of titlep2Array will be received by

<AnimatedLetters
   letterClass={letterClass}
   strArray={titlep2Array}
   idx={15}
   id='to-change'
/>

Answer 1

In-order to reflect UI changes in React, a component must re-render.

A React component re-renders in 1 of 2 scenarios:

1. Whenever there's a change in the value of a local state.
2. Whenever any of it's parent components re-render.

Therefor, since changes in the UI are only reflected upon a re-render, we should manage a local state that would be responsible for this behavior.
With functional components in React, this can be achieved via the useState hook.

In your case, we can simply make titlep2 a state, instead of a regular variable.

Example:

const [titlep2, setTitlep2] = useState('')

const change = () => { 
  setTitlep2(projectsTitleKeyWords[index])
  index = ++index % projectsTitleKeyWords.length
  setTimeout(change, 1000)
}

<AnimatedLetters
   letterClass={letterClass}
   strArray={titlep2.split('')}
   idx={15}
   id='to-change'
/>

Note: since this function now updates the state, we can't call it the way you did in your example, since it will run every time the component re-renders, making the component re-render indefinitely due to the change in state.

Therefor, we can use the useEffect hook in-order to allow it to run only once on the initial render.

Example:

const change = () => { 
  setTitlep2(projectsTitleKeyWords[index])
  index = ++index % projectsTitleKeyWords.length
  setTimeout(change, 1000)
}

useEffect(() => {
   change()
}, [])

• Furthermore, if there are any other variables that should reflect changes in the UI, they can be convert to states as well.

Answer 2

for that try using the setInterval() instead of setTimeout() .

You are trying to make the text change after a specific interval in this case 1 second.

You should also consider doing that will CSS animations, it seems this is overkill.

const change = () => { 
  titlep2 = projectsTitleKeyWords[index]
  index = ++index % projectsTitleKeyWords.length
  
  console.log(titlep2)
  setInterval(change, 1000)
}
change()