如何用useState在React中显示字母文本?

Question

我想创建一个文本，在最后一个字母上添加另一个字母，就像在旧电脑中一样。但是这些字母一直在相互替换，而不是相互添加:

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>

有什么办法解决它?

谢谢!

Answer 1

这是因为StrictMode。使用useEffect时不要忘记清理功能。在这种情况下，你需要清除超时，否则它们会在组件重新渲染时堆积起来，并且在卸载后仍然存在:

React.useEffect(() => {
let ids = [];

['x', 'y'].forEach((letter, index) => {
const id = setTimeout(() => {
setText(text => text + letter);
}, 500 * index);

ids.push(id);
});

// cleanup !
return () => { ids.forEach((id) => clearTimeout(id)); };
}, [])