Redux触发EDIT_USER_VALUE出现undefined字段，role、permission值不更新

问题原因 #

1. Material-UI的Autocomplete组件onChange回调的传参规则和普通输入框不同：第一个参数是事件对象，第二个参数才是当前选中的所有值组成的数组，现有取值逻辑完全错误。
2. 调用handleFieldChange时传入的field变量值为undefined，导致dispatch到reducer的action.key是undefined，最终就会在userDetail下生成undefined的异常字段。
3. 绑定Autocomplete的value时取值路径错误：role和permission存在user.userDetail下，不是直接在user根节点下。
4. 权限选择的Autocomplete完全没有绑定value和onChange属性，不会触发状态更新。

修正方案 #

1. 调整事件处理函数 #

新增适配Autocomplete的变更处理逻辑，也可以直接和原有普通输入框的处理逻辑合并：

const handleFieldChange = (field) => (e, newValue) => {
  // Autocomplete触发时newValue存在，普通输入框取e.target.value
  const value = newValue !== undefined ? newValue : e.target.value;
  dispatch({ type: EDIT_USER_VALUE, key: field, value })
}

2. 修正角色选择Autocomplete配置 #

<Autocomplete
  multiple
  fullWidth
  options={userRole}
  // 修正value取值路径
  value={user.userDetail.role}
  // 直接指定对应字段名，不要用未定义的field prop
  onChange={handleFieldChange('role')}
  getOptionLabel={(option) => option.role}
  renderInput={(params) => (
    <TextField {...params} />
  )}
/>

3. 修正权限选择Autocomplete配置 #

<Autocomplete
  multiple
  fullWidth
  options={userPermission}
  // 补上value绑定
  value={user.userDetail.permission}
  // 补上onChange绑定，指定对应字段名
  onChange={handleFieldChange('permission')}
  getOptionLabel={(option) => option.permission}
  renderInput={(params) => (
    <TextField {...params} />
  )}
/>

修改完成后即可正常把选中的角色、权限值存入userDetail下对应的role和permission数组，不会再生成undefined字段。

内容的提问来源于stack exchange，提问作者Lynn_lee21