Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据
本文记录了我在使用该框架的时候踩过的坑，方便以后查阅。
一、models绑定
在某个组件（控件或是页面），要想从某个models中获取数据，则必须在@connect中进行绑定，不管这个models是在同包下还是别的包下。因为每个models的namespace具有唯一性，所以可以任意绑定：
@connect(({ activity, stadiumList, loading }) => ({
activity,
stadiumList,
submitting: loading.effects['activity/apiUpdateActivity2'],
}))
@Form.create()
class UpdateActivity extends PureComponent
可以看到，我定义了一个UpdateActivity的组件，该组件返回的是一个页面，该页面需要用到两个models中的数据，这两个models的namespace分别是：activity、stadiumList。正如上面所述，想要访问不同models，必须要在@connect中显式的生声明这两个models的namespace。
二、从models中取数据
然后要从中去数据的话，可行的办法有：
（1）只需要从里面读一个数据
const {
activity: { stadiumId },
} = this.props;
这是从命名控件为activity的models中取出list这个数据（要知道，models只是装填数据的容器，就算绑定了这个models，它也不会将数据传给你，只能你自己主动的去取。但要注意，没有绑定的话，是访问不到这个models的）
（2）需要从里面读很多数据
const { activity } = this.props;
我可以直接从this.prop中取出这个models的全部内容，可以像以下这么用：
activity.id;
acitvity.name;
activity.list
等等
只要在这个models里的state里面定义了数据（如：id、name、list等），则都可以被访问到。
（3）models中的数据可以被绑定它的组件修改
onChange4 = e => {
const { activity } = this.props;
activity.id = e.target.value;
};
onChange5 = e => {
const { activity } = this.props;
activity.label = e.target.value;
};
onChange6 = e => {
const { activity } = this.props;
activity.title = e.target.value;
};
如上述代码所示，每个onChange方法均是Input框在触发onChange属性的时候调用的，可以看到，我先像（2）一样，从全局props中取出绑定的models，然后通过“activity.”的方式进行赋值。然后在提交表单时，我会在dispatch中这样写：
handleSubmit = e => {
const { dispatch } = this.props;
const {
activity: {
allowWish,
contactPhone,
content,
id,
label,
title,
tips,
holdOrganization,
locationDes,
stadiumId,
},
} = this.props;
dispatch({
type: 'activity/apiUpdateActivity2',
payload: {
allowWish,
contactPhone,
content,
id,
label,
title,
tips,
holdOrganization,
locationDes,
stadiumId
}
可以看到，我从models中取出这些被改变了的数据，并调用相应接口。这样做的好处就是，我不需要在本页面（即组件）的state中再定义一大堆数据，简化了代码。
