Có mã này trong tâm trí:

var Component = React.createClass({

    getInitialState: function () {
        return {position: 0};    
    },

    componentDidMount: function () {
        setTimeout(this.setState({position: 1}), 3000);
    },

    render: function () {
         return (
            <div className="component">
                {this.state.position}
            </div>
         ); 
    }

});

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Không phải trạng thái sẽ thay đổi chỉ sau 3 giây sao? Nó thay đổi ngay lập tức.

Mục tiêu chính của tôi ở đây là thay đổi trạng thái 3 giây một lần (với setInterval()), nhưng vì nó không hoạt động nên tôi đã thử setTimeout(), điều này cũng không hoạt động. Có đèn nào trên này không? Cảm ơn!

Làm

setTimeout(
    function() {
        this.setState({ position: 1 });
    }
    .bind(this),
    3000
);

Nếu không, bạn đang chuyển kết quả của setStatetới setTimeout.

Bạn cũng có thể sử dụng các hàm mũi tên của ES6 để tránh sử dụng thistừ khóa:

setTimeout(
  () => this.setState({ position: 1 }), 
  3000
);

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

Ở trên cũng sẽ hoạt động vì hàm mũi tên của ES6 không thay đổi ngữ cảnh của this.

Bất cứ khi nào chúng tôi tạo thời gian chờ, chúng tôi nên xóa nó trên componentWillUnmount, nếu nó chưa kích hoạt.

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};    
            },

            componentDidMount: function () {
                 myVar = setTimeout(()=> this.setState({position: 1}), 3000)
            },

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 ); 
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Tôi biết điều này hơi cũ, nhưng điều quan trọng cần lưu ý là React đề xuất xóa khoảng thời gian khi thành phần ngắt kết nối: https://reactjs.org/docs/state-and-lifecycle.html

Vì vậy, tôi muốn thêm câu trả lời này vào cuộc thảo luận này:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

setStateđang được gọi ngay lập tức do dấu ngoặc đơn! Gói nó trong một hàm ẩn danh, sau đó gọi nó:

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

Bạn đã không nói ai đã gọi setTimeout

Đây là cách bạn gọi thời gian chờ mà không cần gọi các chức năng bổ sung.

1. Bạn có thể làm điều này mà không cần thực hiện các chức năng bổ sung.

setTimeout(this.setState.bind(this, {position:1}), 3000);

Sử dụng function.prototype.bind ()

setTimeout lấy vị trí của hàm và giữ nó trong ngữ cảnh.

2. Một cách khác để làm điều tương tự ngay cả bằng cách viết ít mã hơn.

setTimeout(this.setState, 3000, {position:1});

Có thể sử dụng cùng một phương thức ràng buộc tại một số điểm

SetTimeout chỉ lấy vị trí của hàm và hàm đã có ngữ cảnh? Dù sao, nó hoạt động!

LƯU Ý: Chúng hoạt động với bất kỳ chức năng nào bạn sử dụng trong js.

Phạm vi mã của bạn ( this) sẽ là windowđối tượng của bạn , không phải thành phần phản ứng của bạn và đó là lý dosetTimeout(this.setState({position: 1}), 3000) sẽ sụp đổ theo cách này.

Điều đó đến từ javascript không phải React, nó là js đóng

Vì vậy, để liên kết phạm vi thành phần phản ứng hiện tại của bạn, hãy làm như sau:

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

Hoặc nếu trình duyệt của bạn hỗ trợ es6 hoặc projs của bạn có hỗ trợ biên dịch es6 thành es5, hãy thử chức năng arrow, vì arrow func là để khắc phục sự cố 'này':

setTimeout(()=>this.setState({position: 1}), 3000);

Có 3 cách để truy cập phạm vi bên trong của hàm 'setTimeout'

Đầu tiên,

const self = this
setTimeout(function() {
  self.setState({position:1})
}, 3000)

Thứ hai là sử dụng hàm mũi tên của ES6, vì hàm mũi tên không có phạm vi chính nó (cái này)

setTimeout(()=> {
   this.setState({position:1})
}, 3000)

Thứ ba là ràng buộc phạm vi bên trong của hàm

setTimeout(function(){
   this.setState({position:1})
}.bind(this), 3000)

Bạn đã khai báo lỗi cú pháp, hãy sử dụng khai báo setTimeout thích hợp

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}