时间戳

首页 > 解决方案 > Formik arrayHelpers remove 未删除所选项目

reactjs - Formik arrayHelpers remove 未删除所选项目

问题描述

我正在使用 Formik 的 arrayHelpers 从对象数组中推送和删除对象。推送按预期工作，并将对象及其值添加到数组中。当您只选择数组中的一项然后取消选择它时，删除有效。但是，当您选择多个项目时，问题就开始了。例如，您选择第一项并将其添加到数组中，然后选择第二项并将其添加到数组中，但是如果您想取消选择第二项并单击它，则取消选择第一项。然后，如果您再次单击它，它将取消选择第二个项目。

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>
)}

标签： reactjsformik

解决方案

这是通过更改 onClick 中的 isSelected const 以找到如下索引来解决的：

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,
      });

推荐阅读