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,可参考我上面的代码。