Фильтрация данных состояния не работает нормально - React (CRA)

Question

Я создал простое приложение todo. Я могу добавлять элементы в задачу и фильтровать список по all, completed и incomplete. Все списки отображаются соответственно. Проблема в том, что когда я использую какой-либо из фильтров completed или incomplete, и я устанавливаю или снимаю отметку с задачи соответственно, список должен фильтроваться снова при каждой проверке / снятии отметки. Я могу вызвать метод filter, но при некотором неожиданном поведении состояния он удаляет элементы списка, за исключением того, что я проверяю / снимаю флажок, когда какой-либо из фильтров активен.

Я создал эту песочницу , поиграйте.

Sanbox

Answer 1

Я думаю, ваша проблема в том, что когда вы проверяете элемент в modifyList, вы устанавливаете copiedList в предыдущее состояние list, которое является отфильтрованным подмножеством всех данных. изменение setList на setCopiedList, похоже, решило проблему для меня.

const modifyList = (list) => {
  setCopiedList((prevState) => {
    let state = [...prevState];
    return state;
  });
};