按名称而不是索引从 redux 表单字段数组中删除项目答案

【问题标题】：Remove item from redux form field array by its name and not index按名称而不是索引从 redux 表单字段数组中删除项目
【发布时间】：2021-11-27 14:53:46
【问题描述】：

Redux Form 有 FieldArray 字段：

https://redux-form.com/6.0.0-rc.3/docs/api/fieldarray.md/

我正在尝试从中删除多个项目，但 remove() 方法仅适用于单个删除，可能是因为每次 fields 缩小一个项目并且我确定的索引大于 fields 数组：

      <MultiSelect
          placeholder="Delete project group"
          onChange={(v) => {
            const diff = difference(addedGroups, v)
            if (!isEmpty(diff)) {
              const groupToDelete = diff[0]
              forEach(projectsByGroup[groupToDelete], p => removeElement(addedProjects.indexOf(p)))
              deleteGroup(groupToDelete)  
          }}  
          options={projectGroupNames}
          value={addedGroups}
          inline
    />

其中removeElement 是fields.remove FieldArray 函数。如何有选择地从FieldArray 中正确删除多个项目？

更新：

我也尝试在我的减速器中使用change：

import { change } from 'redux-form'

export const deleteVariantSearchProjectGroup = (projectGroupGuid) => {
  return (dispatch, getState) => {
    const state = getState()
    const projectsInGroup = state.projectsByProjectGroup[projectGroupGuid]
    const allProjectFields = getProjectsFamiliesFieldInput(state)
    const remainingProjectFields = allProjectFields.filter(projectField => !projectsInGroup.includes(projectField.projectGuid))
    change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields)
    dispatch({ type: UPDATE_VARIANT_SEARCH_ADDED_GROUPS, newValue: without(getState().variantSearchAddedProjectGroups, projectGroupGuid) })
  }
}

我正确地得到了一个数组remainingProjectFields，但随后change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields) 没有做任何事情。

【问题讨论】：

标签： redux redux-form

【解决方案1】：

我实际上无法找到使用fields.remove 逐个删除字段的方法，但最终我通过使用reducer 并使用change 方法更新Redux Form 状态来解决它：

import { change } from 'redux-form'

export const deleteVariantSearchProjectGroup = (projectGroupGuid) => {
  return (dispatch, getState) => {
    const state = getState()
    const projectsInGroup = state.projectsByProjectGroup[projectGroupGuid]
    const allProjectFields = getProjectsFamiliesFieldInput(state)
    const remainingProjectFields = allProjectFields.filter(projectField => !projectsInGroup.includes(projectField.projectGuid))
    dispatch(change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields))
    dispatch({ type: UPDATE_VARIANT_SEARCH_ADDED_GROUPS, newValue: without(getState().variantSearchAddedProjectGroups, projectGroupGuid) })
  }
}

和deleteVariantSearchProjectGroup = deleteGroup 在问题的第一个jsx 代码sn-p。

【讨论】：