材料UI表组件与Redux不相称

Question

版本 Material-UI：0.18.0 反应：15.5.4 Redux：3.6.0 浏览器：Chrome - 版本59.0.3071.115（官方版本）（64位）

问题 我使用redux进行应用程序范围的状态管理而不是setState。当调用redux操作时，复选框不会注册为已选中，但是当我在控制台时记录它被点击。登录onRowSelection。如果我删除了调用我的操作的行，则复选框工作正常。出于某种原因，当我调用redux操作时，阻止更新Material UI。

- 编辑 - 似乎不是导致故障的动作，这是关于我的减速器的材料UI表不喜欢的东西。 （下面添加了reducer片段）

表组件

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
  }
}

适用于通过道具传递的redux动作

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）以某种方式阻止了组件呈现更新的复选框。

Answer 1

这里的问题是你的reducer正在使用一个不可变状态（通过使用Object.assign）。这是编写reducer（或使用扩展表示法）的好方法，但这会导致问题。

在reducer中设置新的selectedUsers时，您还要创建一个新的状态副本并替换旧的副本。我猜你在selectedUsers（用户对象数组？）的同一个reducer中存储用于生成表的实际数据。当您使用Object.assign({}, state, etc....时，您将在状态对象上创建每个属性的新实例。这包括用于生成表行的用户对象数组。

表组件必须注册该数组是新数组，并根据数组已被替换的事实强制重新呈现或清除当前选定状态。

我有同样的问题，我开始使用此修复程序 -

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

它奏效了，但我不喜欢它。因此，我选择将selectedUsers存储在单独的reducer中，以用于生成表的实际用户数据，这也解决了我的问题。它不是世界上最好的解决方案，但它有效，而且比牺牲不变性更好。

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