Reactjs: удаление функции, удаляющей слишком много элементов из массива динамических элементов c - PullRequest
Новая
       3

Reactjs: удаление функции, удаляющей слишком много элементов из массива динамических элементов c

2 голосов
/ 06 марта 2020

Я создаю компонент, который записывает время, введенное для действия, и задачу для этого действия.

Кнопка «Удалить» (X слева) не работает должным образом, то есть удалить единственный компонент weekPanel, к которому принадлежит кнопка, из массива weekPanels. В настоящее время он удаляет панель, на которую нажали, но также удаляет все следующие панели.

У меня есть демонстрация здесь: https://jscomplete.com/playground/s409549

Состояние компонентов: 

const [weekId, setWeekId] = useState(100);
    const [weekPanels, setWeekPanels] = useState([]);
    const [monday, setMonday] = useState(0);
    const [tuesday, setTuesday] = useState(0);
    const [wednesday, setWednesday] = useState(0);
    const [thursday, setThursday] = useState(0);
    const [friday, setFriday] = useState(0);
    const [saturday, setSaturday] = useState(0);
    const [sunday, setSunday] = useState(0);

Кнопка «Добавить действие / задачу» добавляет компонент WeekPanel в состояние weekPanels. Затем обновляется weekId. 

const addWeekPanel = () => {
        setWeekPanels(weekPanels.concat(
            <WeekPanel
                key={weekId}
                weekId={weekId}
                weekPanels={weekPanels}
                activitiesList={props.activitiesList}
                tasksList={props.tasksList}
                monday={monday}
                tuesday={tuesday}
                wednesday={wednesday}
                thursday={thursday}
                friday={friday}
                saturday={saturday}
                sunday={sunday}
                handleHoursChange={handleHoursChange}
                handleWeekPanelDelete={handleWeekPanelDelete}
                activityTask={{}}
            />));
        setWeekId(weekId + 1);
    }

, который выполняет работу в достаточной степени .

Вот функция удаления: (журналирование удалено) 

const handleWeekPanelDelete = deleteId => {

        const newWeekPanels = weekPanels.filter(week => week !== deleteId);

        setWeekPanels(newWeekPanels);
    }

Это также имеет странное взаимодействие, то есть, когда console.log выходит из состояния на разных указывает, что в журнале показан результат удаления до достижения weekPanels.filter ().

1 Ответ

0 голосов
/ 06 марта 2020

Попробуйте вместо этого использовать сплайс. Он возвращает массив после удаления элемента (удалите один элемент из указанного индекса) 

 const handleWeekPanelDelete = deleteId => {
         weekPanels.splice(deleteId, 1);  
         setWeekPanels(weekPanels);
 }

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

 const handleWeekPanelDelete = deleteId => {     
        let newWeekPanels = weekPanels.filter((x, i)=> i!==deleteId);
        setWeekPanels(newWeekPanels);
 }
...