Mongodb 如何映射包含react、redux中对象嵌套数组的嵌套对象数组

Mongodb 如何映射包含react、redux中对象嵌套数组的嵌套对象数组,mongodb,reactjs,redux,Mongodb,Reactjs,Redux,我有一个mongodb文档,我正在使用axios ajax调用来提取它。文档有一个对象数组,其中还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶端的数据显示在相应的最顶端的表示组件中,但对象的后续阵列不会显示在其相对表示组件中。我得到的错误是“类型错误:this.props.card.rdfts未定义”,但显示它的非数组同级。然而,当我查看react-dev工具和redux-dev工具时,对象数组实际上就在那里,并且作为包含对象数组的对象数组 我搜索了无数的stackover

我有一个mongodb文档,我正在使用axios ajax调用来提取它。文档有一个对象数组,其中还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶端的数据显示在相应的最顶端的表示组件中,但对象的后续阵列不会显示在其相对表示组件中。我得到的错误是“类型错误:this.props.card.rdfts未定义”,但显示它的非数组同级。然而,当我查看react-dev工具和redux-dev工具时,对象数组实际上就在那里,并且作为包含对象数组的对象数组

我搜索了无数的stackoverflow文章以及无数的github文章。我尝试过许多不同的方法,但似乎都不管用

我的mongodb文档是

{
"_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的帮助