react中异步验证表单应该如何写?

场景如下:
有一个input,用户可以输入url地址,然后需要通过请求这个url地址通过返回的状态码是否为200才能走下一步。

stepOne.jsx

clipboard.png

stepController.jsx

clipboard.png

可是问题是除了这一步验证url之外,其他的所有判断是否合法都是同步判断.所以就直接在checkData无误后把值返回到stepController了。可是我岂不是为了这一个异步判断要把stepController里的所有return都放在then或者catch里?
大家有什么优雅一点的方法嘛?

目录结构

clipboard.png

阅读 3.1k
2 个回答

不要去管同步还是异步,每一步校验完成后的状态都调用setState保存,校验的结果通过state体现,而不要根据checkCurrentStep的返回值是true还是false

创建一个容器组件Container,负责校验逻辑,stepController里的逻辑也写在这里。每一个步骤的页面对应一个组件Step1、Step2、Step3...当需要校验页面数据时,页面组件通过props调用Container的stepController方法,stepController完成校验后setState,state类似这样的结构:{page1: {data: XXX, validate: true}, page2:{data: XXX, validate: true}},把state传递给各个页面组件,在页面组件的componentWillReceiveProps()中判断props的变化,当nextProps.validate为true时,表示验证通过,在这个方法中执行跳转到下个页面的逻辑。

我觉得async/await就能解决这个问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题