Asked Thứ Ba, 2:44 PM 61 0 2
  • 61 0 2
+1

Hỏi về đoạn code countDown cơ bản không chạy khi setState

Share
  • 61 0 2

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>
  );
Thứ Năm, 6:33 AM

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?

0
| Reply
Share

2 ANSWERS


Answered Thứ Ba, 3:25 PM
+1

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

Share
HungHocHoi @HungSmeb
Thứ Tư, 4:57 AM

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ỉ image.png nó cứ log là break

0
| Reply
Share
Thứ Năm, 6:32 AM

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?

0
| Reply
Share
Answered Thứ Tư, 12:51 AM
+1

setInterval(countDown, 1000)

Như này bạn

Share
HungHocHoi @HungSmeb
Thứ Tư, 5:01 AM

Lúc sao mình để lại như câu trả lới của bạn vẫn k dc

0
| Reply
Share
HungHocHoi @HungSmeb
Thứ Tư, 5:02 AM

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;

0
| Reply
Share