Asked Jul 20th, 2:44 PM 75 0 2
  • 75 0 2
+2

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

Share
  • 75 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>
  );
Jul 22nd, 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 Jul 20th, 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
Avatar HungHocHoi @HungSmeb
Jul 21st, 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
Jul 22nd, 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 Jul 21st, 12:51 AM
+1

setInterval(countDown, 1000)

Như này bạn

Share
Avatar HungHocHoi @HungSmeb
Jul 21st, 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
Avatar HungHocHoi @HungSmeb
Jul 21st, 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
Avatar HungHocHoi @HungSmeb
Jul 25th, 8:29 AM

Vấn đề trên mình đã giải quyết lâu rồi bằng useEffect rồi ạ, Cảm ơn mọi người đã hỗ trợ

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.