当我点击更改代码时,我只看到console.log。我试着理解它,但我找不到答案..
function App() {
const [laps, setLaps] = useState(0);
const [running, setRunning] = useState(false);
const startTime = Date.now() - laps;
useEffect(() => {
function interval() {
setInterval(() => {
setLaps(Date.now() - startTime);
}, 100);
}
if (!running) {
clearInterval(interval);
console.log('ok');
} else {
interval();
console.log('no');
}
console.log(running);
}, [running]);
return (
<div className="App">
<label>Count: {laps}</label>
<button onClick={() => setRunning(!running)}>{running ? 'stop' : 'start'}</button>
<button>Clear</button>
</div>
);
}
在干净的JavaScript中,这段代码应该正常工作(当然没有JSX)?
clearInterval
期望从setInterval
返回一个数字作为参数,但是你给它interval
函数作为参数。
如果running
为真,你可以改为创建间隔,并从useEffect
返回一个清理函数,该函数将在下次运行效果时运行。
const { useState, useEffect } = React;
function App() {
const [laps, setLaps] = useState(0);
const [running, setRunning] = useState(false);
const startTime = Date.now() - laps;
useEffect(
() => {
if (running) {
const interval = setInterval(() => {
setLaps(Date.now() - startTime);
}, 100);
return () => clearInterval(interval);
}
},
[running]
);
return (
<div className="App">
<label>Count: {laps}</label>
<button onClick={() => setRunning(!running)}>
{running ? "stop" : "start"}
</button>
<button>Clear</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>