Реагировать js свойства объекта не определены в методе рендеринга - PullRequest
Новая
       42

Реагировать js свойства объекта не определены в методе рендеринга

0 голосов
/ 24 апреля 2018

Я пытаюсь получить с lodash запись из Firebase db в виде массива объектов, используя параметр url, соответствующий свойству slug. Когда я пытаюсь показать свойства объекта (например, свойство url) в методе рендеринга, я получаю TypeError: Cannot read property 'url' of undefined. Если я утешаю лог this.props.match.params.slug, то получаю правильный параметр.

вот объект, который я получил от Firebase: 

   {
       "category" : "illustrations",
       "medium" : "ink",
       "slug" : "black-and-white",
       "thumb" : "https://.....png",
       "title" : "black and white",
       "url" : "https://.....png"
    }

Вот мой компонент: 

import React from 'react';
import _ from 'lodash';
import base from '../base';

class Painting extends React.Component {
  constructor() {
    super()
    this.state = {
      pictures: []
    }
  }

  // firebase syncing
  componentWillMount() {
    this.ref = base.syncState('pictures', {
      context: this,
      state: 'pictures',
      asArray: true
    });
  }

  renderImage() {
    if (!this.state.pictures) {
      return ("Loading...");
    } else {
      return <p>{_.find(this.state.pictures, { slug: this.props.match.params.slug }).url}</p>
    }
  }


  render() {

    console.log(this.props.match.params.slug)

    return(
      <div>
        {this.renderImage()}
      </div>
    )
  }
}

export default Painting;

Что я делаю не так?

1 Ответ

0 голосов
/ 24 апреля 2018

Поскольку ваш pictures пуст, и lodash находят неопределенным. Немного исправлю свой renderImage метод: 

    renderImage() {
    if (!this.state.pictures || this.state.pictures.length === 0) {
      return ("Loading...");
    } else {
      return <p>{_.find(this.state.pictures, { slug: this.props.match.params.slug }).url}</p>
    }
 }

Итак, после извлечения, если у вас будет несколько элементов на изображениях, этот метод будет отображаться правильно.

...