我如何映射对象的嵌套数组，其中包含对象的嵌套数组在react，redux中

Question

我有一个要通过axios ajax调用提取的mongodb文档。 该文档具有一个对象数组，该对象数组还包含一个嵌套的对象数组。 每个对象都有一个mongo ID分配给它。 最高数据显示在相应的最高Presentation组件中，但后续的对象数组未显示在其相对的Presentation组件中。 我得到的错误是。 “ 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未定义”

我试图一次处理1级对象数组，但这似乎无法正常工作。

另外，看来我的axios承诺似乎没有停止控制流。 我最初希望将诺言解决，然后进行渲染，但似乎仅此而已，立即调用了渲染。 我想知道对象数组是否未及时实例化，还是什么实例化，但似乎不起作用。

如果您看一下我的控制台，您会发现在兑现承诺之前我到了那里，但那没关系，因为反应是直接从状态树中读取。 一旦状态树被更新，那么反应应该被更新。 对？

15：40：24.978 GET mybuldleyadabundle.js [HTTP / 1.1 200 OK 117ms]

15：40：26.855 componentDidMount CardCC.jsx：42：13

15：40：26.867 TypeError：this.props.card.rdfts未定义[了解更多] ...

15：40：27.327 GET XHR myhttpurl.herokuapp.com/api/Rationale/Restraint/Model/1 [HTTP / 1.1 200 OK 143ms]

15：40：27.800 GET XHR mylocalhost：3001 / sockjs-node / info [HTTP / 1.1 200 OK 2ms]

Answer 1

丹·阿布拉莫夫（Dan Abramov）已经弄清楚了。 https://github.com/paularmstrong/normalizr 。 我需要标准化器。 :)谢谢Dan。也得到了Cory的帮助。