在每个时间间隔更改文本 - React

我试图在反应的每个时间间隔更改文本（屏幕出现时自动开始），但问题是，给定的时间不被尊重，并且文本以随机时间间隔更改。 这是我的代码的一部分：

const names = [
    'tony', 'elias', 'fadi'
]

const [newName, setnewName] = useState(0);

useEffect(() => {
    for (const [index, value] of names.entries()) {
        setTimeout(() => { shuffle(value) }, 5000);
    }
})

const shuffle = (value) => {
    setnewName(value);
}

谢谢你！

这里有一些事情，但主要问题是使用setTimeout in a useEffect没有依赖数组的调用。所以你打电话来shuffle每次渲染后 5000 毫秒，这就是更新似乎随机发生的原因。另外，方法shuffle被称为看起来会带来一些问题。

您应该修改您的代码，以便shuffle函数从其中选择一个随机元素names数组本身并且仅调用shuffle一次（您也可以考虑重命名shuffle类似的东西selectRandomName）。然后改变setTimeout to setInterval并且仅在安装时调用它（而不是在每次渲染时调用）。

这是一个完整的示例：

const names = [
    'tony', 'elias', 'fadi'
]

function MyComponent() {
    const [newName, setnewName] = useState("");

    const shuffle = useCallback(() => {
        const index = Math.floor(Math.random() * names.length);
        setnewName(names[index]);
    }, []);

    useEffect(() => {
        const intervalID = setInterval(shuffle, 5000);
        return () => clearInterval(intervalID);
    }, [shuffle])

    return(
        <Text>name:{newName}</Text>
    )
}

注意使用useCallback这里是为了防止useEffect避免在每个渲染上运行，同时也防止出现 linter 警告。