时间戳

首页 > 解决方案 > 按名称而不是索引从 redux 表单字段数组中删除项目

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

问题描述

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)没有做任何事情。

标签： reduxredux-form

解决方案

我实际上无法找到一种方法来逐个删除字段，fields.remove但最终我通过使用 reducer 并使用方法更新Redux Form状态来解决它：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))
    dispatch(change(SEARCH_FORM_NAME, 'projectFamilies', remainingProjectFields))
    dispatch({ type: UPDATE_VARIANT_SEARCH_ADDED_GROUPS, newValue: without(getState().variantSearchAddedProjectGroups, projectGroupGuid) })
  }
}

和deleteVariantSearchProjectGroup=deleteGroup在问题的第一个jsx代码片段中。

推荐阅读