React - Невозможно прочитать свойство X неопределенного

Итак, я пытаюсь вызвать строку в section1.text... Моя консоль возвращает:

введите здесь описание изображения

Вот мой JSX:

        return (
            <div>
                <h1>{this.props.article.title}</h1>
                <h2>{this.props.article.subTitle}</h2>
                <h3>{this.props.article.body.section1.text}</h3>
            </div>
        );

Заголовок и подзаголовок возвращаются нормально... но когда я пытаюсь получить section1.text, он возвращает:

Не удается прочитать свойство «раздел 1» неопределенного

Я посмотрел в Интернете и думаю, что это как-то связано с тем, что это вложенный объект, но я не могу обойти свою проблему. Какие-либо предложения?


Любая помощь или совет приветствуются. Заранее спасибо?


person djmcr    schedule 15.03.2017    source источник
comment
Я предполагаю, что объект не имеет body на момент его рендеринга, но он добавляется к нему позже, и вы попадаете в противоречие с console отложенная оценка, которая заставляет вас думать, что body здесь.   -  person T.J. Crowder    schedule 15.03.2017
comment
@KoalaYeung: В этом случае у него возникла бы проблема с this.props.article.title.   -  person T.J. Crowder    schedule 15.03.2017
comment
Я объявляю переменную подключения из своего хранилища избыточности, используя store.article.article, а затем вызываю ее атрибуты в своем jsx с помощью this.props.article.subTitle @KoalaYeung.   -  person djmcr    schedule 15.03.2017
comment
Как я уже сказал, он возвращает заголовок и подзаголовок без проблем, я думаю, проблема заключается в том, как я вызываю body.section1.text в моем JSX.   -  person djmcr    schedule 15.03.2017
comment
Вы сопоставили article с mapStateToProps в своем connect звонке?   -  person Koala Yeung    schedule 15.03.2017
comment
Все, что я использовал, это @connect((store) =› { return {article: store.article.article, fetching: store.article.fetching}; })   -  person djmcr    schedule 15.03.2017
comment
@KoalaYeung см. выше   -  person djmcr    schedule 15.03.2017
comment
Вы пробовали console.log(this.props.article) в своей функции рендеринга? Ошибка, кажется, указывает, что this.props.article.body равно undefined. Какая структура article фактически получена при рендеринге?   -  person Koala Yeung    schedule 15.03.2017
comment
(P.S. В прошлый раз, когда я столкнулся с подобной проблемой, у меня была опечатка в коде.)   -  person Koala Yeung    schedule 15.03.2017
comment
Я согласен с @T.J.Crowder. Вывод вашей консоли не обязательно будет отражать ваш props при первоначальном рендеринге. Тем временем он может обновляться, если только вы специально не консольируете это свойство, а не дерево. Сделайте свой console.log, а затем сразу после него добавьте строку: debugger. Это гарантирует, что вывод в консоли не изменится. ИЛИ сделать console.log(this.props.article.body). Что ты видишь?   -  person Chris    schedule 15.03.2017
comment
Я зарегистрировал article.body при рендеринге, он по-прежнему правильно возвращает свойства @Chris   -  person djmcr    schedule 15.03.2017
comment
@KoalaYeung изображение журнала консоли, которое я прикрепил к вопросу, является результатом извлечения данных из редукса с моего сервера, как я уже сказал, он отлично возвращает все мои другие свойства, но не те, которые вложены глубже в объекты.   -  person djmcr    schedule 15.03.2017
comment
@danjonescidtrix мы не можем найти проблему без дополнительного кода. Но из вашего кода выше я понял, что вы возвращаете загрузчик до завершения выборки, верно? а потом вы показываете статью. В этом случае я бы предложил поделиться своим начальным состоянием редуктора, если тело есть, то оно никогда не будет неопределенным. В этом случае поделитесь своим действием и редуктором.   -  person Johnny Klironomos    schedule 15.03.2017
comment
Вывод отладчика реакции не помогает понять, почему props.article.body стал неопределенным. Я предложил напрямую добавить оператор console.log в функцию рендеринга вашего компонента. Это совсем не то, что отображается на вашем изображении.   -  person Koala Yeung    schedule 15.03.2017


Ответы (2)


Используйте Google Chrome и расширение Chrome «React Tools», чтобы проверить состояние вашего компонента во время выполнения.

person Josh Wulf    schedule 16.03.2017

Наконец-то текст отображается на странице? Если да, я подозреваю, что в вашем исходном состоянии нет поля section1, поэтому перед первым рендерингом оно пусто. У меня была аналогичная проблема, и это результат моего случая, может быть, у вас то же самое :)

person Michal Cholewiński    schedule 16.03.2017