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 />

 

问题就解决了。

 

原理是:只有最终设置的属性,确实被更改了,不等于默认初始值"",我们就认为数据已经更新好了,那么这个时候,进入下一个页面,是可以读到数据的。

 

分类: 编程语言 标签: umijs/max React useState Render history.push 发布于: 2024-04-09 18:06:22, 点击数: