React: "Удаление компонента из массива компонентов"

Question

Всем привет.

Parent компонент хранит стейт и метод с SetState который должен отрендерить заново компоненты, оба далее предаются к Child и Subchild's через props.

Subchild содержит кнопку которая удаляет самого себя вызывает метод SetState у Parent.

Вопрос: почему при клике на кнопку к Subchild приходят props без элемента который я удалил, но появляется ошибка, удалённый элемент пытается отрендерится но не находит данных в props. По идее в props.items.map его ведь не должно быть.

<Parent>
    <Child>
        props.items.map(function (product, index) {
           return ( <Subchild key={index} props={props} method={method}/> )
           }
    <Child>
</Parent>

Answer 1

У вас в Parent хранится state со списком Child компонентов.
Parent рендерит Сhild компоненты.
Child рендерит Subchild компоненты.
Subchild рендерит кнопку, клик по которой удаляет Subchild

В вашем случае, встретив удаленный элемент, map вернет конструкцию вида <Subchild key={undefined} props={undefined} method={undefined}/> (или что-то подобное, в зависимости от того, как вы удаляете Subchild. Т.к. в текущем виде Child знает, что если он рендерит себя, то он обязан отрендерить и Subchild, даже если он его не найдет в стейте. Чтобы подобное поведение исключить надо добавить еще 1 проверку.

props.items.map(function (product, index) {
    if (isDeleted) //Ваше условие, по которому можно понять, что Subchild удален и его не надо рендерить.
         return ( <Subchild key={index} props={props} method={method}/> )
}

БЛОГ НА HUSL

React: "Удаление компонента из массива компонентов"

Ответы (1 шт):