Material UI Table 组件在 Redux 中表现不佳

艾利兰

版本
Material-UI:0.18.0
React:15.5.4
Redux:3.6.0
浏览器:Chrome -- 版本 59.0.3071.115(官方版本)(64 位)

问题
我使用 redux 而不是 setState 进行应用程序范围的状态管理。当调用 redux 操作时,复选框不会注册为选中状态,但它会注册它在我 console.log 时被单击onRowSelection如果我删除调用我的操作的行,复选框就可以正常工作。出于某种原因,当我调用我的 redux 操作时,Material UI 被阻止更新。

--编辑--
看来,导致故障的不是操作,而是材质UI的表不喜欢我的减速器。
(在下面添加了减速器片段)

表组件

class AdminDeptAppAccess extends React.Component {

  _onRowSelection (selectedUsers, props) {
    console.log(selectedUsers)
    props.selectedUsersAction(filterUsers(selectedUsers, props.deptAppRoles))
  }

  render () {
    return (
      <Table
        selectable
        multiSelectable
        onRowSelection={(selectedUsers) => this._onRowSelection(selectedUsers, this.props)}
       >
         {/* contents */}
       </Table>
    )
  }
}

const filterUsers = (selectedUsers, deptAppRoles) => {
  if (selectedUsers === 'all') {
    return deptAppRoles
  } else if (selectedUsers === 'none') {
    return []
  } else if (selectedUsers === []) {
    return []
  } else {
    let users = []
    selectedUsers.map((num, i) => (
      users.push(deptAppRoles[num])
    ))
    return users
  }
}

通过 props 传递的适用的 redux action

export const selectedUsersAction = (users) => {
  console.log('selectedUsersAction', users)
  return dispatch => {
    dispatch({
      type: 'SELECTED_USERS',
      selectedUsers: users
    })
  }
}

适用减速机

const admin = (state = { selectedUsers: [] }, action) => {
  switch (action.type) {
    // ...
    case 'SELECTED_USERS':
      return Object.assign({}, state, {
        selectedUsers: action.selectedUsers
      })
    default:
      return state
  }
}

屏幕截图
忽略控制台错误,它们来自其他东西。

我选择了第一行,控制台注册 [0] 被点击,我的 redux 操作注册了被点击的人,但复选框没有更新,因为我的 redux 操作(reducer)以某种方式阻止了组件呈现更新的复选框。

在此处输入图片说明

丹·芒迪

The problem here is that your reducer is working with an immutable state (by using Object.assign). This is a good way to write a reducer (or using spread notation), but it's causing a problem here.

When you set the new selectedUsers in the reducer you are also creating a new copy of state and replacing the old one. I'm guessing you are storing the actual data used to generate the table in same reducer as the selectedUsers (an array of user objects?). When you use Object.assign({}, state, etc.... you are creating new instances of every property on the state object. This includes the array of user objects used to generate the table rows.

The table component must be registering that this array is new and forcing a re-render or clearing the current selected state based on the fact that the array has been replaced.

我遇到了同样的问题,我从这个修复开始 -

const admin = (state = { selectedUsers: [] }, action) => {
 switch (action.type) {
  // ...
  case 'SELECTED_USERS':
   state.selectedUsers = action.selectedUsers
   return state
  default:
   return state
 }
}

它有效,但我不喜欢它。所以我选择将我的selectedUsers数据存储在一个单独的减速器中,用于生成表的实际用户数据,这也解决了我的问题。这不是世界上最好的解决方案,但它有效,而且比牺牲不变性要好。

所以暂时我有一个单独的selected减速器用于我的不同表格视图。从长远来看,我认为我需要找到更好的解决方案。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章