我想创建一个文本,其中的另一个字母被添加到最后一个字母,就像在一台旧电脑中一样,但字母之间不断替换,而不是添加到另一个字母中:
const App = () => {
const [text, setText] = React.useState(``);
React.useEffect(() => {
[`x`,`y`].forEach((letter, index) => {
setTimeout(()=> {
// old: setText(text => text + letter)
setText(text => text + letter) // new: printing each letter twice
}, 500 * index)
})
}, [])
return (text)
}
ReactDOM.createRoot(document.getElementById(`root`))
.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>
有什么办法可以补救呢?
谢谢!
2条答案
按热度按时间k7fdbhmy1#
这是因为StrictMode。使用useEffect时不要忘记清除函数。在这种情况下,您需要清除超时,否则它们将在组件重新渲染时堆积起来,并在卸载后仍然存在:
46scxncf2#
你的大错误是你没有处理state的前一个值,你在每次渲染中都更新了state的值,而不是state的前一个值。我相信你的错误可以通过在setText()中使用回调来解决: