Question

应该使用以下组件：

通过api调用获取单个字母
将其附加到字符串并显示

问题：当我快速按几次按钮时，字符串仅用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

使用updater form ...

setLetters(prevLetters => prevLetters + nextLetter)

反应挂钩-由于关闭而使用旧状态更新setState

1 个答案: