javascript - React hooks - 由于关闭而异步 setState 更新旧状态

Question

以下组件应该:

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

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

我知道问题在于闭包保留了对旧 letters 的引用。处于状态的变量。 但是如何用钩子(Hook)解决这个问题呢？我将其重写为一个类组件并且它在那里工作，但那是因为 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

使用updater form ...

setLetters(prevLetters => prevLetters + nextLetter)