• PropTypesPerform type checking

Set the PropTypes attribute to Component to type check the Props attribute of Component.

  1. The type that can be detected
{
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
}
Copy the code

  1. Shape detects different data types for different properties of different objects

  2. Use isRequired to set the property to a value that must be passed

{
  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,
  }
}
Copy the code
  • Edit user -> ANTDformBring in existing roles -> rolesselectDon’t show

Solution: add | | [], the reason: the data before returning the page has been rendered

{
  initialValue: toJS(userGroup.userGroup.roleList || []).map(r= >String(r.roleId),),
}
Copy the code
  • action 和 runInActionThe difference between

  1. If you rerun the reaction every time you modify an observable state, it can be too frequent in some scenarios. The concept of action can be understood as a batch operation or as a transaction. Multiple changes to the observable state within an action will only recalculate the calculated value and the execution reaction once the action is completed.

  2. Action or @ Action can wrap a function as an action.

  3. The runInAction(fn) can simply be thought of as syntactic sugar for action(fn)(). Wrap the fn parameter as an action and execute it immediately.

{
  runInAction((a)= > {
    userGroup.userGroups.search = searchForm.query
  })
  userGroup.fetchUserGroups()
}
Copy the code
  1. Another benefit of using actions is to make it clear that they contain internal changes to observable state, alerting developers to them.
  • columns render(record)The values

The this.removeUse method does not fetch data from the record, and requires an e => callback

{title: 'operation ', dataIndex: 'handler', render: (text, record, Index) => (// eslint-disable-next-line <a data-index={index} onClick={e => this.removeUse(record)}> delete </a>)}Copy the code