Удалите элемент из массива полей формы redux по его имени, а не по индексу

#redux #redux-form

Вопрос:

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) ничего не делаю.

Ответ №1:

Я не смог на самом деле найти способ удалить поля одно за fields.remove другим, но в конечном итоге я решил эту проблему с помощью редуктора и обновления 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 фрагменте кода в вопросе.