Mongodb 如何映射包含react、redux中对象嵌套数组的嵌套对象数组
我有一个mongodb文档,我正在使用axios ajax调用来提取它。文档有一个对象数组,其中还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶端的数据显示在相应的最顶端的表示组件中,但对象的后续阵列不会显示在其相对表示组件中。我得到的错误是“类型错误:this.props.card.rdfts未定义”,但显示它的非数组同级。然而,当我查看react-dev工具和redux-dev工具时,对象数组实际上就在那里,并且作为包含对象数组的对象数组 我搜索了无数的stackoverflow文章以及无数的github文章。我尝试过许多不同的方法,但似乎都不管用 我的mongodb文档是Mongodb 如何映射包含react、redux中对象嵌套数组的嵌套对象数组,mongodb,reactjs,redux,Mongodb,Reactjs,Redux,我有一个mongodb文档,我正在使用axios ajax调用来提取它。文档有一个对象数组,其中还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶端的数据显示在相应的最顶端的表示组件中,但对象的后续阵列不会显示在其相对表示组件中。我得到的错误是“类型错误:this.props.card.rdfts未定义”,但显示它的非数组同级。然而,当我查看react-dev工具和redux-dev工具时,对象数组实际上就在那里,并且作为包含对象数组的对象数组 我搜索了无数的stackover
{
"_id" : ObjectId("58d93a23a62fdfa37438b4ca"),
"url" : "/api/Rationale/Restraint/Model/1",
"type" : "body",
"title" : "title",
"vid" : {
"_id" : ObjectId("58d93a23a62fdfa37438b4c3"),
"type" : "video",
"src" : "somesrc",
"border" : "1",
"width" : "400",
"height" : "200",
"frameborder" : "0",
"allowfullscreen" : false
},
"topic" : "Topic?",
"rdfts" : [
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c4"),
"rdft" : "ReasonDetailFactTransition",
"explainations" : [
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c5"),
"explaination" : "Explaination1"
},
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c6"),
"explaination" : "Explaination2"
}
]
},
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c7"),
"rdft" : "Reason Detail Fact Transition 2",
"explainations" : [
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c8"),
"explaination" : "Explaination1"
},
{
"_id" : ObjectId("58d93a23a62fdfa37438b4c9"),
"explaination" : "Explaination2"
}
]
}
],
"conclusion" : "Conclusion of Card"
}
我正在从componentwillmount调用ajax
componentWillMount() {
console.log("componentDidMount")
let myURI = ''; {
let { api, page, section, subsection, card } = this.props.match.params;
myURI = `/${api}/${page}/${section}/${subsection}/${card}`;
}
console.log("json call 1")
this.props.dispatch(asyncSetCard(myURI));
}
这是我的砰砰声,似乎并没有阻止控制流
asyncSetCard(uri) {
return dispatch => {
return axios.get(uri).then(response => {
dispatch(setCardSuccess(response.data[0]));
}).catch(error => {
throw (error);
});
}
}
因此,ajax调用似乎可以工作,但当我尝试用其他嵌套对象数组呈现嵌套对象数组时,我得到了上面的TypeError
这在渲染函数中发生
render() {
return (
<div>
<h2>Title: {this.props.card.title}</h2>
<h3>Topic: {this.props.card.topic}</h3>
{this.props.card.rdfts.map(RDFTs)}
<h3>Conclusion: {this.props.card.conclusion}</h3>
</div>
);
}
render(){
返回(
标题:{this.props.card.Title}
主题:{this.props.card.Topic}
{this.props.card.rdfts.map(rdfts)}
结论:{this.props.card.Conclusion}
);
}
如果我删除{this.props.card.rdfts.map(rdfts)}
,则显示文档的第一级。如果我把它放回去,随后的嵌套文档数组就不会显示,我会得到以下错误。“TypeError:this.props.card.rdfts未定义”
我试着一次处理一个级别的对象数组,但这似乎不起作用
而且,我的axios承诺不会停止控制流。我原本希望承诺得到解决,然后再进行渲染,但似乎当时只是失败,渲染被立即调用。我想知道对象数组是否没有及时实例化,或者什么,但它似乎不起作用
如果你看一下我的控制台,你会发现我在承诺得到解决之前就已经犯了错误,但这不重要,因为react直接从状态树读取。状态树更新后,react应该更新。对吧?
15:40:24.978获取mybuldleyadabundle.js[HTTP/1.1200OK 117ms]
15:40:26.855部件安装卡CC.jsx:42:13
15:40:26.867类型错误:this.props.card.rdfts未定义[了解更多信息]
15:40:27.327获取XHR
myhttpurl.herokuapp.com/api/rational/restriction/Model/1[HTTP/1.1 200
OK 143ms]
15:40:27.800获取XHR mylocalhost:3001/sockjs节点/info[HTTP/1.1200]
OK 2ms]
丹·阿布拉莫夫已经弄明白了。我需要的是标准化器。:)谢谢Dan,还有Cory的帮助