React 钩子 - 由于关闭，异步 setState 更新旧状态

Question

以下组件应该：

1. 从 API 调用中获取单个字母
2. 将其附加到字符串并显示它

问题：当我快速按下按钮几次时，字符串仅更新为 1 个字母 预期结果：无论单击频率如何，字符串都会使用与按钮单击相同的字母数进行更新

我知道问题是闭包保留了对处于状态的旧letters变量的引用。 但是我如何使用钩子解决这个问题？我将其重写为类组件并且它在那里工作，但那是因为this.state.letters不在闭包中。

按"运行代码片段"进行测试。

function getRandomLetter() {
return 'abcdefghijklmnopqrstuvwxyz'[new Date() % 26]
}
function apiCreateNextLetter() {
return new Promise(resolve => {
setTimeout(() => {
resolve(getRandomLetter())
}, 1000)
})
}
function Alphabet() {
const [letters, setLetters] = React.useState('')
function getNextLetter() {
apiCreateNextLetter().then(nextLetter => {
setLetters(letters + nextLetter)
})
}
return (
<div>
<button onClick={getNextLetter}>
Get next letter
</button>
<span>
Letters: {letters}
</span>
</div>
)
}
ReactDOM.render(<Alphabet />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="app"></div>

Answer 1

使用更新程序表单...

setLetters(prevLetters => prevLetters + nextLetter)