React 开发中,巧用Render中的条件判断,解决useState delay的问题
情况是这样的。 我开发React项目,用到了umijs/max 的 useModel, 它底层是用了React的 useState机制。
今天比较坑爹的是,我碰到了useState延时更新的问题。导致获取不到需要的数据。
我在跨页面传参数过程中,被狠狠教训了。
在第一个页面,收集用户输入,然后用useModel 设置变量,然后在第二个页面读取。读不到。
实际上程序逻辑没问题,有问题的是怪这个React 的useState执行时机,它不保证实时执行。
后来我就想到了用Render ,也就是jsx 模块的 条件判断
比如 { testContent == "" ? <br /> : redirectToNextPage() }
这样就解决了
redirectToNextPage() 可以用 history.push 更改跳转,然后return一个空元素,我是return <br />
问题就解决了。
原理是:只有最终设置的属性,确实被更改了,不等于默认初始值"",我们就认为数据已经更新好了,那么这个时候,进入下一个页面,是可以读到数据的。