2022-05-19 this.setData is not a function
阿新 • • 發佈:2022-05-20
前言:react專案在呼叫介面時,本打算把返回值給變數賦值,沒曾想就報錯了。
排查:this.setData所在的函式塊內的this沒有呼叫到setData這個方法,據很多網友提示是指this沒有定義,但我打印出來是有指向react例項的。
找了半天沒尋著答案,我就去看了下前輩留下的程式碼。發現前輩把setData進行了一次封裝。具體如下:
// app.jsxcomponentDidMount() { this._isMounted = true }
// 封裝setData
setStateSync(self, data) { return new Promise(resolve => { if (self._isMounted) { self.setState(data, ()=> { resolve(); }); } else { resolve(); } }); },
// Home.jsx
// 使用
componentWillUnmount() { this._isMounted = false }
setData = (data) => app.setStateSync(this, data)
// 注:_isMounted不用定義在this.state裡面。
簡單來說就是,呼叫介面的時候是非同步的,而this.setData在檢視層的操作是非同步,因此頁面渲染可能並不會立即發生,因此我們可以給setDat設定一個promise,
讓它接收一個回撥函式,而不是一個物件,這個回撥函式有兩個引數,第一個是接收前的一個狀態值,然後第二個時更新後的值
原因:this.setData非同步了,不能立即執行操作。
解決方法:設定回撥函式來觸發setData,可參考我上面的程式碼。