记录第一次使用react和redux踩过的坑

最近开始使用react框架开发前端项目，特此记录下再使用react过程中踩过的坑，避免下次再犯

第一个大坑

我们的前端数据大部分都是使用redux的方式获取的，页面中几乎所有的请求都经过redux，再一次开发过程中，有一个页面是弹窗的表单，大概就是长下面这个样子，

 

点击手工录入是下边的界面，点击识别导入显示为另一个界面，为了开发方便就手工录入和识别导入写成了两个不同的组件，根据选择的不同展示不同的组件。静态页面的时候没有任何问题，连接接口调试的时候发现需要父组件调用子组件的各种方法，表单校验，提交表单这些方法，前端ui框架使用的是antd,自然而然就用到了antd中的form表单校验和提交方式，一开始将该页面整个Form.create()放到了redux中，父组件通过调用redux来获取form表单元素去校验，再父组件中通过先是通过useEffect获取form表单，还把form表单作为了参数写到了useEffect中代码大概是这个样子的

const [addForm, setAddForm] = useState();
useEffect(()=>{
    dispatch({
        type:'xxx/addForm'
    })
    setAddForm(form)
},[dispatch,form])

结果打开这个页面之后浏览器疯狂打印redux中的数据，不到一分钟内存瞬间被爆满，页面卡死，点击各种按钮不好使， 当时就傻眼了，后来赶紧把form这个参数去掉，然后好了，我就在想这是为什么呢。后来大概能明白了，useEffect再初始化组件时是不能对dom结构进行操作的，而form表单对象是属于dom结构的一部分，因此会造成这种现象。不过有个小小的疑问，为什么dispatch作为参数的时候就是好使的呢，回头我还得再查查。再后来父子组件传值直接使用了useRef，简单好用，也不用走redux，管它form表单怎么变呢，useEffect也用不着了，美滋滋。还有再使用redux时不管每次返回值里都有什么,state值一定要返回，再一次开发过程中没注意state未返回，整个页面直接崩了，浏览器控制台疯狂报错。因为很多变量用的都是redux中的，没返回造成的结果就是浏览器根本找不到对应的变量，自然而然就报错了。

第二个大坑

前端ui框架全部是antd，form表单又用到了很多，其中输入框输入的值校验就用到了antd中的rules属性，写callback函数，一开始代码写的大概是这个样子的

<Form.Item label="录入日期：">
              {getFieldDecorator('createTime', {
                initialValue: [],
                rules: [
                  {
                    validator: (_, value, callback) => {
                        if (value[0].clone().add(180, 'days').isBefore(value[1])) {
                          callback('最大跨度为180天，请调整查询范围！');
                        }
                      callback();
                    },
                  },
                ],
              })(<RangePicker disabledDate={noCreateDate} />)}
            </Form.Item>

这么一看没毛病啊，输入日期，两个日期相减，大于180天就提示，没毛病啊，结果点击查询的时候validateFields校验死活进不去，哪怕是错了也进不去，我就纳了闷了这是怎么了，各种查找原因都说是callback函数没执行，不可能啊，我这个callback肯定执行了呀，不服的我，再里边随便打印了个结果，结果真是啪啪啪打脸啊，callback函数就是没执行，为什么没执行呢，看了下自己的查询条件，这个日期没有选，默认值又为空，执行的时候直接报错了，也没加try/catch包围，可不就不执行callback了么，流行了两行不争气的眼泪。默默加了个判断value值不为空，且数组长度大于1，或者加上try/catch也可以，catch里直接写一个callback函数即可。加上之后顿觉通畅了许多。

还有再使用form表单时一定严格遵守antd中表单的规则，如果稍有不注意控制台就会打印许多错误，这块要尤其注意

第三个大坑

这个坑非常不容易被发现，属于优化的范围吧。列表页面查询之后数据都保存在了redux中，每次重新执行查询数据发生变化，页面都会显示一个变化的过程，例如该值是2，现在变为了3应该直接显示3的，结果会看到页面中数据先是2然后3出来了才会再页面中显示出来，当时没在意这个问题觉得数据没毛病啊，后来后端给我提，说我页面数据明显显示有点慢，应该是直接显示出来而不应该有个变化的过程，我当时就想到了是redux中数据的问题，每次数据都变化可不就这样了么。就想如何解决呢，第一每次页面数据快要变化的时候先清空redux中的值再重新赋值，虽然可行，但是未必太麻烦了，还要清空redux中的值，有没有更好一点的呢。后来又仔细研究了下，每次数据变化的时候加个loading的提示，开始请求时loading变为转圈圈的状态，接口请求完成之后loading设为false就不再显示，这样一来就看不到数据的变化了，亲测好用。由于接口响应速度又非常快，因此loading的加载几乎看不出来，这样还有一个好处，如果哪天接口出现了意外，不至于页面垮掉，可以直接转圈圈提示加载中。当然了每次页面卸载的时候还是可以清空下redux中的数据的，当然也要根据具体的业务来变化了。

以上就是第一次使用react和redux时踩过的几个比较大的坑，特此记录下来，以免日后再犯。