Я использую компонент пользовательского интерфейса Switch для фильтрации между выполненными и невыполненными задачами в моем список.

См. панель демонстрационных кодов

Я могу переключить завершенные элементы, но проблема в том, что я не могу вернуться к незавершенным, когда я переключаюсь (я не могу повторно использовать весь свой массив задач для фильтрации)

Метод

  const getCompleted = (e, value) => {
    let result = [];
    result = tasks.filter(({ completed }) => completed);
    setFilteredData(result);
    console.log(result);
  };

Компонент

  <FormControl component="fieldset">
    <FormControlLabel
      value="start"
      control={<Switch onChange={getCompleted} color="primary" />}
      label="Start"
      labelPlacement="start"
    />
  </FormControl>
0
Koala7 5 Июл 2021 в 17:18

3 ответа

Лучший ответ

Кажется, вы не фильтруете по значению переключателя.

const getCompleted = (e, value) => {
    let result = [];
    let switchValue = e.target.checked;
    result = tasks.filter(({ completed }) => completed === switchValue);
    setFilteredData(result);
    console.log(result);
  };
1
Squiggs. 5 Июл 2021 в 14:29

Вам нужно как-то обработать значение checked вашего switch

Я не знаю, нужно ли в исходном положении отображать все значения, но мой ответ был основан на этом сенарио (не проверено, затем отображаются все задачи, иначе отображаются только завершенные)

  const getCompleted = (e, value) => {
    let result = [];
    result = e.target.checked
      ? tasks.filter(({ completed }) => completed)
      : tasks;
    setFilteredData(result);
  };
1
Apostolos 5 Июл 2021 в 14:28

Вам необходимо проверить значение переключения в функции, которая вызывается при изменении переключения.

const getCompleted = (e, value) => {
    let result = [];
    result = value ? tasks.filter(({ completed }) => completed) : tasks;
    setFilteredData(result);
  };

См. Обновленный codeandbox

0
Khateeb321 5 Июл 2021 в 14:35