Как правильно реализовать функцию для смены массива?

Question

[DanceMonkeyTime]

Всем привет.

Есть у меня компонент которая имеет пропс multiSelection: true | false;
Есть у меня массив selected: [] и чекбоксы которые имеют состояние checked: true | false.

Если у меня multiSelection = true и checked = true, то в массив можно записать несколько значений, если checked =. false удаляем элемент.

Если у меня multiSelection = false и checked = true, то в массив должно записываться только одно значение и удаляться тоже.

Я пробую что-то придумать толковое но что-то ничего не получается:

const [selected, toggleSelected] = useState([]);

const setSelected = (option, checked) => {
    const selectedValues = [...selected];
    if (multiSelection) {
      if (checked) {
        toggleSelected([...selectedValues, option]);
      } else {
        const filteredArray = selectedValues.filter(
          (item) => item.key !== option.key
        );
        toggleSelected(filteredArray);
      }
    } else {
      if (checked) {
        toggleSelected([option]);
      } else {
        selectedValues.pop();
        toggleSelected(selectedValues);
      }
    }
  };

Answer 1

[Александр]

const [selected, setSelected] = useState([]);

const toggleSelected = (option, checked) => {
    if (multiSelection) {
        setSelected(selected => checked
            ? [...selected, option.key]
            : selected.filter(entry => entry !== option.key)
        );
    } else {
        setSelected(checked
            ? [option.key]
            : []
        );
    }
};

Считаю, что отмеченные элементы лучше не объектами хранить, а строками .Также переменные у Вас названы были наоборот, это вводило небольшую путаницу - toggleSelected не имело логики переключения, хотя по наименованию - должна была бы. То же самое было с setSelected. Демка.
Кстати, думаю можно задуматься об UX'е, т. к. если можно выбрать только 1 checkbox, тогда может делать radio? Если так, можно будет убрать эту логику.

Comments

[DanceMonkeyTime]

Почему строками?

А если в будущем придётся сохранить выбранный option в редакс. Мне строка про выбранный option ничего не говорит.

[Александр]

DanceMonkeyTime, Тут, на самом деле, Вам решать. Т. к. всё зависит от задачи.