分享一下学习React和Ant Design的数据流向和学习过程中踩到的坑

一. 数据流向
     

                                
数据流向总结：

1. 通过事件调用model的effect
2. model调用统一管理的service请求函数
3. 使用封装的request.js发送请求
4. 获得服务器返回
5. 调用render改变state
6. 更新model

二. 踩到的坑

 　　1.getFieldDecorator未定义的问题。
　　答：再组件上方加入@Form.create(),
　　并且再使用的方法上面加入申明const {form:{getFieldDecorator}} = this.props;
　　  setFieldDecorator同理。例如下：

setDirectoryFieldsValue = (value) => {
    const { form: { setFieldsValue } } = this.props;
    setFieldsValue({
      name: value
    });
  }

@Form.create()
class Demo extends Component {
    ……
}

　　
　　2.调用this.setState({})页面未刷新的问题。
　　答：可能原因为修改的是表单数据，用setFieldsValue({})进行刷新。
　　3.dispatch未定义问题。
　　答：首先需要申明dispatch,然后需要再组件前加入@connect(()=>({})),例如
　　

@connect(({ }) => ({
 
}))
class Demo extends Component {
    ……
    test = () =>{
    const { dispatch } = this.props;
    
    dispatch({
      type: "xxx/xxx",
      callback: response => {
       consolue.info(response);
      },
    });

  }
}

　　
　　4.this指向问题
     答：建议函数编写或者调用时候使用箭头函数，否则会出现this指向问题。如果方法中出现window方法，要现在外部保存this，然后再方法中使用变量来用this关键字。 
　　5.当使用栅格布局时，出现对不齐的问题。
　　答：如果使用的lableCol和wrapperCol的值全部是一样的，那么检查antd的CSS样式，
　　查看是否占满antd-row ant-form-item的col，没有占满覆盖一下antd的样式。
　　
　　6.DatePicker取消时报转换异常的问题。
     答：由于清除时候data的值为空，再提交后直接用数据进行格式话的时候会有异常。  所以需要进行数据判断，非空再进行格式化。