以下组件应该:
问题:当我快速按几次按钮时,字符串仅用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调用中获取单个字母将其附加到字符串中并显示出来问题:当我快速按下按钮两次时,字符串只是...
使用updater form ...