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

问题描述 投票:0回答:1

以下组件应该:

  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>

以下组件应该:从api调用中获取单个字母将其附加到字符串中并显示出来问题:当我快速按下按钮两次时,字符串只是...

javascript reactjs closures react-hooks
1个回答
1
投票

使用updater form ...

© www.soinside.com 2019 - 2024. All rights reserved.