已解決430363個問題，去搜搜看，總會有你想問的

沒有胖箭頭功能的 JavaScript React setInterval

首頁猿問沒有胖箭頭功能的...

沒有胖箭頭功能的 JavaScript React setInterval

JavaScript

神不在的星期二 2023-06-15 09:51:28

我開始使用 React，我看到我可以使用 setInterval() 中的粗箭頭函數設置一個時鐘：class Clock extends React.Component { constructor(props) { super(props) this.state = { date: new Date() } this.timer = null } componentDidMount() { this.timer = window.setInterval(() => { this.setState({ date: new Date() }) }, 1000) }但是我沒有設法通過常規函數（如下）獲得相同的結果。我認為它與在常規函數內創建新上下文的“this”關鍵字相關聯？我不知道如何解決這個問題：componentDidMount() { this.timer = window.setInterval(function() { this.setState({ date: new Date() }) }, 1000)}感謝您的時間

查看完整描述

2 回答

長風秋雁

TA貢獻1757條經驗獲得超7個贊

箭頭函數自動綁定父作用域的上下文。但regular function默認情況下不這樣做。為了更改常規函數的上下文，您可以使用bind下面示例中的方法。

this.timer = window.setInterval(function() { 
   this.setState({ date: new Date() })
}.bind(this), 1000)

反對回復 2023-06-15

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

這不完全是因為 newthis是為常規函數創建的（順便說一句，不要混淆上下文和this），常規函數的規則this是：

在構造函數的情況下是一個新對象
undefined in functions call in strict mode
如果函數作為方法調用，則為當前對象

你的情況是第三種，但訣竅是當使用setIntervalor時setTimeout，回調函數作為方法調用，但在全局范圍內（this== window）。

經典的方法是保存this在一個變量中。因為該函數可以訪問創建它的上下文，所以它會記住這個變量：

var self = this;

this.timer = window.setInterval(function() {

self.setState({ date: new Date() })

}, 1000)

您也可以使用bind

反對回復 2023-06-15

2 回答
0 關注
148 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

沒有胖箭頭功能的 JavaScript React setInterval

沒有胖箭頭功能的 JavaScript React setInterval

2 回答

添加回答