Реагировать - Попытка визуализировать свойство объекта, хотя оно остается "неопределенным" - PullRequest
Новая
       5

Реагировать - Попытка визуализировать свойство объекта, хотя оно остается "неопределенным"

0 голосов
/ 01 июля 2018

console.log(detailtext) показывает мне, что данные объекта есть, реквизит, кажется, работает, но я не могу отобразить свойства объекта. Почему?

Это очень простой компонент: 

import React from "react";
import { Link } from "react-router-dom";

class LibraryTextDetails extends React.Component {
  render() {
    const detailtext = this.props.detailview || {};
    console.log("THIS IS THE DETAILTEXT");
    console.log(detailtext);
    const detailviewIds = detailtext.id;
    console.log("THIS IS THE DETAILVIEW ID");
    console.log(detailviewIds);

    return (
      <div>
        <div className="covercard">
          <img
            src={detailtext.lead_image_url}
            width={157}
            className="coverdetailimage"
          />
        </div>
        <div className="titledetailcard">{detailtext.title}</div>
        <div className="authordetailcard">{detailtext.author}</div>
      </div>
    );
  }
}

export default LibraryTextDetails;

Вот это console.log:

enter image description here

Ответы [ 3 ]

0 голосов
/ 01 июля 2018

вам не хватает важной вещи

detailtext - массив объектов

когда вы видите в log [{ ... }], это означает, что это массив с одним объектом

log также отображает первый объект в массиве ниже

поэтому правильное использование будет 

detailtext[0].lead_image_url
detailtext[0].title

и аналогичные или используйте переменную прокси или исправьте способ отправки данных в этот компонент не в виде массива, а просто в виде объекта (сначала в массиве)

0 голосов
/ 01 июля 2018

Вы передаете массив как detailview вашему компоненту. Данные, которые вы видите в своей консоли, являются данными первого объекта в массиве. Убедитесь, что вы визуализируете detailview[0], и он будет работать.

Пример 

class LibraryTextDetails extends React.Component {
  render() {
    const { detailview } = this.props;
    const detailtext = (detailview && detailview[0]) || {};

    return (
      <div>
        <div className="covercard">
          <img
            src={detailtext.lead_image_url}
            width={157}
            className="coverdetailimage"
          />
          <div className="titledetailcard">{detailtext.title}</div>
          <div className="authordetailcard">{detailtext.author}</div>
        </div>
      </div>
    );
  }
}
0 голосов
/ 01 июля 2018

Я бы сказал, учитывая, что detailtext - это массив, который вам нужно заменить 

  const detailviewIds = detailtext.id;

от 

  const detailviewIds = detailtext[0].id;

... но я не вижу идентификатор на твоем скриншоте. Это существующее свойство?

...