在jsx中使用react呈现嵌套对象
在jsx中使用react呈现嵌套对象
提问于 2019-03-11 17:27:46
我正在尝试使用map函数在react jsx中呈现来自firestore数据库的嵌套对象。像“我将保存文档”这样的“arrayinlineStyleRanges”属性包含在一个对象(Document)中，该对象(Document)包含一个数组块，该数组块包含另一个包含对象(文本)的文本块。我正在尝试呈现文本对象，但我很难弄清楚正确呈现它的语法。
该对象具有以下结构：
(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
Stack Overflow用户
发布于 2019-03-12 04:05:43
我使用了新的es6映射函数来创建一个新的对象映射，并使用扩展操作符将其转换为数组，然后在chrome dev工具中查看对象的结构作为数组。
经过研究，我找到了正确的语法：
<CardText>File text: {result.document.blocks["0"].text}</CardText>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55098724
复制相关文章
相似问题