javascript - 反应状态更新：更新计时器中的状态不会正确更新值

Question

我正在尝试渲染roles数组中的每个元素。此代码在计时器（setInterval）中工作如下：

1. 分配变量中状态的重复值及其在let prevRole变量中的对应索引let prevRoleIndex。

2. 以 50 毫秒的延迟迭代渲染随机字符串 10 次。

3. 现在roles数组中的下一个元素被分配给let newRole变量，通过添加 +1previousRoleIndex 然后使用 newRole 变量更新状态。

import {useState, useEffect} from 'react'

const roles = ['Web Developer & UX Designer', 'Software Developer / Engineer', 'Blockchain Developer', 'Data Anaylist/ Scientist']

export default function App() {
 
    const [role, setRole] = useState(roles[0])
    const sleep = (value) =>{
        return new Promise(r => setTimeout(r, value));
    }
    const getRandomString = () =>{
        return (Math.random()).toString(36).substring(2);
    }
    useEffect(() => {
        const timer = setInterval(async() => {
            console.log("Timer has started")

            let prevRole = role;
            let prevRoleIndex = roles.findIndex((ele)=>ele===prevRole)
            
            console.log("Previous Role State: "+ prevRole)
            
            for(let i=0; i<10; i++){
                setRole(getRandomString())
                await sleep(50)
            }

            prevRoleIndex = prevRoleIndex+1 >= roles.length? -1: prevRoleIndex
            let newRole = roles[prevRoleIndex+1]
            
            console.log("New Role State: "+ newRole)
            
            setRole(newRole)
          }, 3000);
          return () => clearInterval(timer);
        }, []);
        return(
          <div>
            <h1>{role}</h1>
          </div>
    )
}

该代码在第一次计时器迭代期间工作正常，在第二次迭代后状态不会更新。

标签： javascriptreactjs