Hỏi về đoạn code countDown cơ bản không chạy khi setState
Cho mình hỏi sao trong cái hàm countDown cái setTimeType ấy sao không set nhỉ mình không thấy nó render thành break rồi break thành focus Có thêm xem chi tiết ở CodeSanbox a
const [timer, setTimer] = useState(5);
const [started, setStarted] = useState(false);
const [intervalId, setIntervalId] = useState(null);
const [timeType, setTimeType] = useState('focus');
console.log(timeType);
const countDown = () => {
setTimer((prevTimer) => {
if (prevTimer > 0) {
return prevTimer - 1;
} else if (prevTimer === 0) {
if (timeType === 'focus') {
setTimeType('break');
return 10;
} else if (timeType === 'break') {
setTimeType('focus');
return 5;
}
}
});
};
function handleClickStart() {
if (!started) {
setStarted(!started);
setIntervalId(setInterval(countDown, 1000));
} else {
clearInterval(intervalId);
setStarted(!started);
}
}
return (
<div className="App">
<h1>Time type: {timeType}</h1>
<h1>Timer: {timer}</h1>
<button onClick={handleClickStart}>Start</button>
{/* <CountDown /> */}
{/* <PomodoroTimer /> */}
{/* <PomodoroTimerclassName /> */}
{/* <PomodoroTimerFunction /> */}
</div>
);
2 ANSWERS
Bạn thử sửa lại từ setTimer(timer - 1) sang setTimer(timer => timer - 1) xem. Trong document của React cũng nói đến ví dụ này https://reactjs.org/docs/hooks-reference.html#functional-updates
cái code mình hỏi là lúc đầu mình hỏi thôi chứ lúc sau mình sửa lại rồi
setTimer((prevTimer) => {
if (prevTimer > 0) {
return prevTimer - 1;
} else if (prevTimer === 0) {
if (timeType === 'focus') {
setTimeType('break');
setTimer(10);
} else if (timeType === 'break') {
setTimeType('focus');
setTimer(5);
}
}
});
Nhưng cho mình hỏi sao cái setTimeType nó không hoạt động nhỉ
nó cứ log là break
Bạn có chắc là câu lệnh set cái timeType của bạn đã được chạy không? Nhỡ may lúc runtime nó chưa chạy và case đấy thì sao?
Lúc sao mình để lại như câu trả lới của bạn vẫn k dc
Code của mình là từ đoạn code class components này ạ mình thử chuyển qua function component mà bị lỗi như trên ạ
import React, { Component } from "react";
class AppC extends Component {
constructor(props) {
super(props);
this.state = {
timeType: "focus",
timer: 5,
started: false,
intervalId: null
};
this.handleClickStart = this.handleClickStart.bind(this);
this.countDown = this.countDown.bind(this);
}
countDown() {
if (this.state.timer > 0) {
this.setState({ timer: this.state.timer - 1 });
} else if (this.state.timer === 0) {
if (this.state.timeType === "focus") {
this.setState({ timeType: "break", timer: 10 });
} else if (this.state.timeType === "break") {
this.setState({ timeType: "focus", timer: 5 });
}
}
}
handleClickStart() {
if (!this.state.started) {
this.setState({
started: !this.state.started,
intervalId: setInterval(this.countDown, 1000)
});
} else if (this.state.started) {
clearInterval(this.state.intervalId);
this.setState({
started: !this.state.started
});
}
}
render() {
return (
<div className="appC">
<h1>Time type: {this.state.timeType}</h1>
<h1>Timer: {this.state.timer}</h1>
<button onClick={this.handleClickStart}>Start</button>
</div>
);
}
}
export default AppC;
Bạn có chắc là câu lệnh set cái timeType của bạn đã được chạy không? Nhỡ may lúc runtime nó chưa chạy và case đấy thì sao?