1. 程式人生 > 其它 >2022-05-19 this.setData is not a function

2022-05-19 this.setData is not a function

前言:react專案在呼叫介面時,本打算把返回值給變數賦值,沒曾想就報錯了。

排查:this.setData所在的函式塊內的this沒有呼叫到setData這個方法,據很多網友提示是指this沒有定義,但我打印出來是有指向react例項的。

找了半天沒尋著答案,我就去看了下前輩留下的程式碼。發現前輩把setData進行了一次封裝。具體如下:

// app.jsx
// 封裝setData
setStateSync(self, data) {
return new Promise(resolve => { if (self._isMounted) { self.setState(data, ()
=> { resolve(); }); } else { resolve(); } }); },

// Home.jsx
// 使用
    componentDidMount() {         this._isMounted = true     }
    componentWillUnmount() {         this._isMounted = false     }

 setData = (data) => app.setStateSync(this, data)
// 注:_isMounted不用定義在this.state裡面。

簡單來說就是,呼叫介面的時候是非同步的,而this.setData在檢視層的操作是非同步,因此頁面渲染可能並不會立即發生,因此我們可以給setDat設定一個promise,

讓它接收一個回撥函式,而不是一個物件,這個回撥函式有兩個引數,第一個是接收前的一個狀態值,然後第二個時更新後的值

原因:this.setData非同步了,不能立即執行操作。

解決方法:設定回撥函式來觸發setData,可參考我上面的程式碼。