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 that you have read and understand our privacy policy and code of conduct.

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