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

Question

我有一个mongodb文档，我正在使用axios ajax调用来提取它。文档有一个对象数组，其中还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶端的数据显示在相应的最顶端的表示组件中，但对象的后续阵列不会显示在其相对表示组件中。我得到的错误是。“TypeError: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>
    );
}

如果我删除{this.props.card.rdfts.map（rdfts）}，则显示文档的第一级。如果我把它放回去，随后的嵌套文档数组就不会显示，我会得到以下错误。“TypeError:this.props.card.rdfts未定义”

我试着一次处理一个级别的对象数组，但这似乎不起作用。

此外，我的公理promise似乎并没有停止停止控制流。我本来想解决的promise，然后渲染，但它似乎只是落空，渲染是立即调用。我想知道对象数组是否没有及时实例化，或者是什么，但它似乎不起作用。

如果你看一下我的控制台，你会发现我在promise得到解决之前就已经犯了错误，但这不重要，因为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.1 200 OK 2ms]

Answer 1

丹·阿布拉莫夫已经弄明白了。https://github.com/paularmstrong/normalizr. 我需要的是标准化器。：）谢谢Dan，还有Cory的帮助。