Issue truy cập vào trạng thái bên trong setInterval trong React.js

Question

Tôi cố gắng để truy cập vào trạng thái của một thành phần bên trong một setInterval theo cách này nhưng nó không làm việc:

componentDidMount: function() { 
    setInterval(function() { 
     console.log(this.state); 
    }, 3000); 
} 

Tuy nhiên, nếu tôi đặt chức năng gọi lại trong một phương pháp thành phần riêng biệt, nó hoạt động hoàn hảo:

displayState: function() { 
    console.log(this.state) 
} 
componentDidMount: function() { 
    setInterval(this.displayState(), 3000); 
} 

Bất kỳ ý tưởng nào về việc này xảy ra? Tôi muốn sử dụng tùy chọn đầu tiên.

Answer 1

Trong ví dụ đầu tiên, this nằm ngoài phạm vi khi chức năng gọi lại kích hoạt. Một cách để giải quyết vấn đề này sẽ được sử dụng một biến:

componentDidMount: function() { 
    var self = this; 
    setInterval(function() { 
     console.log(self.state); 
    }, 3000); 
} 

Vấn đề với nỗ lực thứ hai của bạn là bạn đang kêu gọi các chức năng ngay lập tức và đi qua các kết quả thực thi các chức năng để setInterval. Bạn phải vượt qua chức năng bản thân, chăm sóc để ràng buộc giá trị của this:

componentDidMount: function() { 
    setInterval(this.displayState.bind(this), 3000); 
} 

Để làm rõ, sự khác biệt giữa cách tiếp cận này và ví dụ thứ hai trong câu hỏi của bạn là ở đây, một chức năng đã được thông qua với setInterval (vì function.bind() trả về một hàm).

Vì bạn đang sử dụng React.createClass, bạn không cần phải tự quản lý ràng buộc của this do autobind. Điều này có nghĩa rằng bạn chỉ có thể vượt qua các chức năng riêng của mình và this sẽ được giống như trong bối cảnh ban đầu:

componentDidMount: function() { 
    setInterval(this.displayState, 3000); 
} 

Tất nhiên, cách tiếp cận phù hợp nhất phụ thuộc vào việc bạn muốn sử dụng một chức năng ẩn danh hay không.

Answer 2

Bạn cần thực hiện trình xử lý khoảng thời gian với tham chiếu chính xác đến this. Sử dụng Phản ứng của autobinding cho các giải pháp cleasest IMO:

displayState: function() { 
    console.log(this.state) 
}, 
componentDidMount: function() { 
    setInterval(this.displayState, 3000) 
} 

Hoặc sử dụng bind nếu bạn muốn có một chức năng ẩn danh:

componentDidMount: function() { 
    setInterval(function() { 
     console.log(this.state) 
    }.bind(this), 3000) 
}