setInterval trong ứng dụng React

Tôi vẫn còn khá mới trong React, nhưng tôi đã bắt đầu từ từ và tôi đã gặp phải điều gì đó mà tôi đang mắc kẹt.

Tôi đang cố gắng xây dựng một thành phần "bộ đếm thời gian" trong React và thành thật mà nói, tôi không biết liệu mình đang làm điều này đúng (hoặc hiệu quả). Trong mã của tôi dưới đây, tôi thiết lập nhà nước để trả về một đối tượng { currentCount: 10 }và đã toying với componentDidMount, componentWillUnmountvà rendervà tôi chỉ có thể nhận được trạng thái để "đếm ngược" 10-9.

Câu hỏi gồm hai phần: Tôi đang làm gì sai? Và, có cách nào hiệu quả hơn để sử dụng setTimeout (thay vì sử dụng componentDidMount& componentWillUnmount) không?

Cảm ơn bạn trước.

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

Tôi thấy 4 vấn đề với mã của bạn:

• Trong phương pháp hẹn giờ, bạn luôn đặt số lượng hiện tại của mình thành 10
• Bạn cố gắng cập nhật trạng thái trong phương thức kết xuất
• Bạn không sử dụng setStatephương pháp để thực sự thay đổi trạng thái
• Bạn không lưu trữ khoảng thời gian của mình ở trạng thái

Hãy cố gắng khắc phục điều đó:

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

Điều này sẽ dẫn đến bộ đếm thời gian giảm từ 10 xuống -N. Nếu bạn muốn bộ đếm thời gian giảm xuống 0, bạn có thể sử dụng phiên bản sửa đổi một chút:

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},

Đã cập nhật đếm ngược 10 giây bằng cách sử dụng class Clock extends Component

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props){
    super(props);
    this.state = {currentCount: 10}
  }
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if(this.state.currentCount < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;

Đã cập nhật đếm ngược 10 giây bằng cách sử dụng Hooks (một đề xuất tính năng mới cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết lớp. Chúng hiện đang ở trong React v16.7.0-alpha).

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Clock = () => {
    const [currentCount, setCount] = useState(10);
    const timer = () => setCount(currentCount - 1);

    useEffect(
        () => {
            if (currentCount <= 0) {
                return;
            }
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
        },
        [currentCount]
    );

    return <div>{currentCount}</div>;
};

const App = () => <Clock />;

ReactDOM.render(<App />, document.getElementById('root'));

Cảm ơn @dotnetom, @ greg-herbowicz

Nếu nó trả về "this.state là không xác định" - hàm hẹn giờ ràng buộc:

constructor(props){
    super(props);
    this.state = {currentCount: 10}
    this.timer = this.timer.bind(this)
}

Nếu bất kỳ ai đang tìm kiếm một cách tiếp cận React Hook để triển khai setInterval. Dan Abramov đã nói về nó trên blog của mình . Hãy xem nó nếu bạn muốn đọc tốt về chủ đề bao gồm cả cách tiếp cận Lớp học. Về cơ bản, mã là một Hook tùy chỉnh biến setInterval như một phần khai báo.

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Cũng đăng liên kết CodeSandbox để tiện theo dõi: https://codesandbox.io/s/105x531vkq

Cập nhật trạng thái mỗi giây trong lớp phản ứng. Lưu ý rằng index.js của tôi chuyển một hàm trả về thời gian hiện tại.

import React from "react";

class App extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      time: this.props.time,

    }        
  }
  updateMe() {
    setInterval(()=>{this.setState({time:this.state.time})},1000)        
  }
  render(){
  return (
    <div className="container">
      <h1>{this.state.time()}</h1>
      <button onClick={() => this.updateMe()}>Get Time</button>
    </div>
  );
}
}
export default App;