开发经验分享 2019.12.19对Component设置PropTypes属性，可以为Component的props属

PropTypes进行类型检查

对Component设置PropTypes属性，可以为Component的props属性进行类型检查。

可以检测的类型

{
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
}

shape检测不同对象的不同属性的不同数据类型
使用isRequired设置属性为必须传递的值

{
  static propTypes = {
    store: PropTypes.shape({
      userGroup: PropTypes.shape({
        restoreUserGroup: PropTypes.func,
        toggleUserGroupModal: PropTypes.func,
        setUserGroup: PropTypes.func,
        destroyUserGroup: PropTypes.func,
        destroyingUserGroup: PropTypes.bool,
      }),
      user: PropTypes.shape({
        fetchAllRoles: PropTypes.func,
      }),
    }).isRequired,
  }
}

编辑用户 -> antd form带入已有角色 -> 角色select不显示

解决：添加 || [ ]，原因：数据没返回之前页面已渲染

{
  initialValue: toJS(userGroup.userGroup.roleList || []).map(r =>String(r.roleId),),
}

action 和 runInAction 区别

如果每次修改一个可观察状态就重新运行一次反应，在某些场景下会显得过于频繁。动作这个概念可以理解为批量操作，或理解为事务。一个动作内部包含的多次对可观察状态的修改只会在动作执行完毕后，一次性重新计算计算值和执行反应。
action 或 @action 可以把一个函数包装成动作。
runInAction(fn) 可以简单的认为是 action(fn)() 的语法糖。把参数 fn 包装成一个 action 后马上执行。

{
  runInAction(() => {
    userGroup.userGroups.search = searchForm.query
  })
  userGroup.fetchUserGroups()
}

使用动作的另外一个好处是明确表示其内部包含对可观察状态的修改，提醒开发者注意。

columns render(record) 取值

this.removeUse 方法取不到record中数据，需要加上 e => 回调

{
  title: '操作',
  dataIndex: 'handler',
  render: (text, record, index) => (
    // eslint-disable-next-line
    <a data-index={index} onClick={e => this.removeUse(record)}>
      删除
    </a>
  )
}