我正在尝试使用 map 函数在 react jsx 中渲染来自 firestore 数据库的嵌套对象。像“我将保存文档”这样的“文本”属性包含在一个对象(文档)中,该对象(文档)包含一个数组 [blocks],该数组 [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>;
}