Question

我正在尝试使用map函数在react jsx中从Firestore数据库渲染嵌套对象。像“我将保存文档”之类的“文本”属性包含在一个对象（文档）中，该对象包含一个数组[块]，该数组包含另一个包含对象（文本）的数组[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>;
}

Answer 1

我使用新的es6 Map函数制作了一个新的对象图，然后使用散布运算符将其转换为数组，然后在chrome开发工具中将对象的结构看成数组。

研究之后，我发现了正确的语法：

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

使用react在jsx中渲染嵌套对象

1 个答案: