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

【问题标题】：Change text at every time interval - React在每个时间间隔更改文本 - React
【发布时间】：2021-03-03 02:53:01
【问题描述】：

我试图在反应的每个时间间隔更改一个文本（它在屏幕出现时自动开始），但问题是，给定的时间没有得到尊重，并且文本以随机的时间间隔发生变化. 这是我的代码的一部分：

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

谢谢！

【问题讨论】：

这有帮助吗？而不是时间调用随机播放：stackoverflow.com/questions/63604185/…

标签： reactjs react-native

【解决方案1】：

这里有几件事，但主要问题是在没有依赖数组的useEffect 调用中使用setTimeout。所以你在每次渲染后调用shuffle 5000ms，这就是为什么更新似乎是随机发生的。此外，shuffle 的调用方式看起来会带来一些问题。

您应该修改您的代码，以便shuffle 函数自己从names 数组中选择一个随机元素，并且只调用一次shuffle（您也可以考虑将shuffle 重命名为@987654329 @)。然后将 setTimeout 更改为 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 警告。

【讨论】：