如何解决多个功能会更改React组件的状态吗?
这是我的代码,无法正常工作:
import { useEffect,useState } from "react";
function App() {
const [counter,setCounter] = useState(0);
const timeout = (ms) => {
return new Promise(resolve => setTimeout(resolve,ms));
}
const startIncreasing = async () => {
while (true) {
await timeout(1000);
setCounter(counter + 1);
console.log(counter);
}
}
useEffect(() => {
console.log('re-render');
});
return (
<>
<p>Counter: {counter}</p>
<button onClick={() => startIncreasing()}>
Start
</button>
</>
);
}
export default App;
我想做的是每次单击start
按钮时,我想要一个新函数startIncreasing()
实例来增加状态变量counter
的值。但是现在counter
在两个函数之间是不一致的。我单击了3次按钮,这是我的日志:
App.js:20 re-render
3App.js:15 0
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 1
re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 2
App.js:20 re-render
App.js:15 1
App.js:20 re-render
App.js:15 0
App.js:20 re-render
App.js:15 1
App.js:20 re-render
此外,HTML在时间间隔之间显示Counter: 1
或Counter: 2
或Counter: 3
。
有什么想法吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。