Formik arrayHelpers удалить не удаляет выбранный элемент - PullRequest
Новая
       33

Formik arrayHelpers удалить не удаляет выбранный элемент

0 голосов
/ 01 мая 2020

Я использую arrayHelpers от Formik, чтобы вывести sh и удалить объекты из массива объектов. Pu sh работает как положено и добавляет объект и его значения в массив. Удаление работает, когда вы выбираете только один элемент в массиве, а затем снимаете его. Проблема, однако, начинается при выборе нескольких элементов. Например, вы выбираете первый элемент, и он добавляется в массив, а затем выбираете второй элемент, и он добавляется в массив, но, скажем, вы хотите отменить выбор этого второго элемента и щелкнуть по нему, первый элемент отменяется. Затем, если вы нажмете на него еще раз, он отменяет выбор второго элемента. 

initialValue: lenders: []

/*mock array of lenders*/
const lenders = [
  {
    id: 1,
    text: 'Lender1',
    value: 'Lender1',
  },
  {
    id: 2,
    text: 'Lender2',
    value: 'Lender2',
  },
  {
    id: 3,
    text: 'Lender3',
    value: 'Lender3',
  },
]
<FieldArray
  name="lenders"
  render={arrayHelpers => (
    <div className="lenders">
      {lenders.map(lender => (
        <div key={lender.id}>
          <Field name={`lender${lender.id}`}>
            {({ field, meta }) => (
              <SelectableCard
                id={field.name}
                name={field.name}
                text={lender.value}
                isSelected={props.values.lenders.some(
                  len => len.id === lender.id
                )}
                label={lender.value}
                inputName={field.name}
                value={lender.value}
                ref={field.ref}
                onClick={evt => {
                 let isSelected = props.values.lenders.some(
                   len => len.id === lender.id
                 );
                 isSelected
                  ? arrayHelpers.remove(lender)
                  : arrayHelpers.push({
                      id: lender.id,
                      value: lender.value,
                  });

                  field.onChange({
                   target: {
                    id: lender.id,
                    value: !isSelected,
                   },
                  });
                 }}
              />
            )}
          </Field>
        </div>
      ))}
    </div>
)}

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Это было решено путем изменения isSelected const в onClick для поиска индекса следующим образом: 

const index = props.values.lenders.findIndex(
      len => len.id === lender.id
);

Затем оборачивание arrayHelpers, чтобы проверить, больше ли индекс -1: 

index > -1
      ? arrayHelpers.remove(index)
      : arrayHelpers.push({
          id: lender.id,
          value: lender.value,
      });
0 голосов
/ 01 мая 2020

FieldArray arrayHelpers рендеринг реквизитов принимает индекс удаляемого элемента, а не удаляемый объект

Передача индекса, полученного из карты 

<FieldArray
  name="lenders"
  render={arrayHelpers => (
    <div className="lenders">
      {lenders.map((lender, index) => (
        <div key={lender.id}>
          <Field name={`lender${lender.id}`}>
            {({ field, meta }) => (
              <SelectableCard
                id={field.name}
                name={field.name}
                text={lender.value}
                isSelected={props.values.lenders.some(
                  len => len.id === lender.id
                )}
                label={lender.value}
                inputName={field.name}
                value={lender.value}
                ref={field.ref}
                onClick={evt => {
                 let isSelected = props.values.lenders.some(
                   len => len.id === lender.id
                 );
                 isSelected
                  ? arrayHelpers.remove(index)
                  : arrayHelpers.push({
                      id: lender.id,
                      value: lender.value,
                  });

                  field.onChange({
                   target: {
                    id: lender.id,
                    value: !isSelected,
                   },
                  });
                 }}
              />
            )}
          </Field>
        </div>
      ))}
    </div>
)}
...