javascript icon indicating copy to clipboard operation
javascript copied to clipboard

同步setState这部分有没有demo code?

Open bisbaldk opened this issue 4 years ago • 9 comments

Promise.then setTimeout/setInterval new Promise(resolve=>{ resolve() }).then(()=>{ this.setState({}) })

这个好像依然无法同步获得state,在下一个.then依然拿到的依然是没更新的state

bisbaldk avatar Aug 12 '21 20:08 bisbaldk

react-setStateSync 可以参考下这里

liubin915249126 avatar Aug 13 '21 02:08 liubin915249126

react-setStateSync 可以参考下这里

我在console里面尝试这样,再往后chain一个then不能拿到最新的state,或者说是这么用的吗?

bisbaldk avatar Aug 13 '21 02:08 bisbaldk

这种方式性能不好的,文章里也说了,用 promise 的方式替代callback

liubin915249126 avatar Aug 13 '21 02:08 liubin915249126

setStateSync(state){
        return new Promise(resolve=>{
            this.setState(state,resolve)
        })
    }

liubin915249126 avatar Aug 13 '21 02:08 liubin915249126

setStateSync(state){
        return new Promise(resolve=>{
            this.setState(state,resolve)
        })
    }

这个本质还是利用了class component中setstate有callback的性质,在函数component中这个方法就不适用了,我帖子里提到的这一种,在函数component中适用吗?

bisbaldk avatar Aug 13 '21 02:08 bisbaldk

function component 里面react 提供了 useEffect 可以拿到最新的state

liubin915249126 avatar Aug 13 '21 02:08 liubin915249126

function component 里面react 提供了 useEffect 可以拿到最新的state

对,假设不能用useeffect,有没有办法把functional component中的setstate promise化?

bisbaldk avatar Aug 13 '21 02:08 bisbaldk

new Promise((resolve) => {
	resolve();
}).then(() => {
	setTimeout(() => console.log('in settimeout'), 3000);
  return 'something'
}).then(value => console.log(value));

在这段代码中settimeout模拟setstate的异步操作,到下一个then,还是没有办法在下一个then拿到更新后的数据。。

react-setStateSync 可以参考下这里

bisbaldk avatar Aug 13 '21 02:08 bisbaldk

react-setStateSync 可以参考下这里

new Promise((resolve, reject) =>{
      resolve()
    }).then(()=>{
      this.setState({done:true})
      console.log(111, this.state.done)
    }).then(() => { // 这里可以保证拿到的是新state吗?貌似不能?});
  }

bisbaldk avatar Aug 13 '21 02:08 bisbaldk