场景如下:
有一个input,用户可以输入url地址,然后需要通过请求这个url地址通过返回的状态码是否为200才能走下一步。
stepOne.jsx
stepController.jsx
可是问题是除了这一步验证url之外,其他的所有判断是否合法都是同步判断.所以就直接在checkData无误后把值返回到stepController了。可是我岂不是为了这一个异步判断要把stepController里的所有return都放在then或者catch里?
大家有什么优雅一点的方法嘛?
目录结构
场景如下:
有一个input,用户可以输入url地址,然后需要通过请求这个url地址通过返回的状态码是否为200才能走下一步。
可是问题是除了这一步验证url之外,其他的所有判断是否合法都是同步判断.所以就直接在checkData无误后把值返回到stepController了。可是我岂不是为了这一个异步判断要把stepController里的所有return都放在then或者catch里?
大家有什么优雅一点的方法嘛?
目录结构
10 回答11.3k 阅读
5 回答4.9k 阅读✓ 已解决
4 回答3.2k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
不要去管同步还是异步,每一步校验完成后的状态都调用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时,表示验证通过,在这个方法中执行跳转到下个页面的逻辑。