1

Всем привет.

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>
1
  • извините, вопрос очень увлекательный, но ничего не понятно 29 июл 2020 в 23:08

1 ответ 1

0
  1. У вас в Parent хранится state со списком Child компонентов.
  2. Parent рендерит Сhild компоненты.
  3. Child рендерит Subchild компоненты.
  4. 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}/> )
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.