использовать реагировать для рендеринга вложенного объекта в jsx - PullRequest
Новая
       18

использовать реагировать для рендеринга вложенного объекта в jsx

0 голосов
/ 11 марта 2019

Я пытаюсь визуализировать вложенный объект из базы данных firestore в реакции jsx с функцией map. Свойство text, например «Я сохраню документ», содержится в объекте (документе), который содержит массив [blocks], который содержит другой массив [inlineStyleRanges], который содержит объект (текст). Я пытаюсь визуализировать текстовый объект, и мне трудно разобраться в синтаксисе, чтобы он правильно отображался.

Объект имеет такую ​​структуру: 

(4) [{…}, {…}, {…}, {…}]
0:
description: "Lorem ipsum dolor sit amet, suspendisse velit"
document:
blocks: Array(1)
0:
 data: {}
 depth: 0
 entityRanges: []
 inlineStyleRanges: []
 key: "8u7m4"
 text: "I will save this document."
 type: "unstyled"
__proto__: Object
length: 1
__proto__: Array(0)
entityMap: {}
__proto__: Object
id: Timestamp {seconds: 1551856294, nanoseconds: 879000000}
title: "TCC/NIBF SUMMARY SHEET"
__proto__: Object

мой метод рендеринга выглядит так: 

render() {
  const urlID = this.state.urlID;
  const results = this.state.documents;
  const postList = results.map((result, index) => {
    if (urlID === result.id.seconds.toString()) {
      return (
        <Card key={result.id.seconds}>
          <CardBody>
            <CardTitle>File Name: {result.title}</CardTitle>
            <CardText>File Description: {result.description}</CardText>
            {/*<CardText>File Document Text: {result.document... }</CardText>*/}
          </CardBody>
        </Card>
      );
    } else {
      return null;
    }
  });
  return <div>{postList}</div>;
}

1 Ответ

0 голосов
/ 11 марта 2019

Я использовал новую функцию es6 Map для создания новой карты объектов, которую я превратил в массив с помощью оператора распространения, а затем посмотрел на структуру объекта как массив в инструментах разработчика Chrome.

Изучив его, я нашел правильный синтаксис: 

<CardText>File text: {result.document.blocks["0"].text}</CardText>
...