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

Question

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

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);
}

谢谢你！

Answer 1

setTimeout这里有一些事情，但主要问题是在useEffect没有依赖数组的调用中使用。因此，您在每次渲染后调用shuffle5000 毫秒，这就是更新似乎随机发生的原因。此外，这种调用方式shuffle看起来会带来一些问题。

您应该修改代码，以便该函数自行shuffle从数组中选择一个随机元素并且仅调用一次（您也可以考虑重命名为类似的名称）。然后更改为并仅在安装时调用（而不是在每次渲染时调用）。namesshuffleshuffleselectRandomNamesetTimeoutsetInterval

这是一个完整的示例：

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 警告。