Yêu cầu thg 7 20, 2021 2:44 CH 112 0 2
  • 112 0 2
+2

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

Chia sẻ
  • 112 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>
  );
thg 7 22, 2021 6:33 SA

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?

2 CÂU TRẢ LỜI


Đã trả lời thg 7 20, 2021 3:25 CH
+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

Chia sẻ
Avatar HungHocHoi @HungSmeb
thg 7 21, 2021 4:57 SA

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

thg 7 22, 2021 6:32 SA

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?

Đã trả lời thg 7 21, 2021 12:51 SA
+1

setInterval(countDown, 1000)

Như này bạn

Chia sẻ
Avatar HungHocHoi @HungSmeb
thg 7 21, 2021 5:01 SA

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

Avatar HungHocHoi @HungSmeb
thg 7 21, 2021 5:02 SA

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;

Avatar HungHocHoi @HungSmeb
thg 7 25, 2021 8:29 SA

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ợ

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí