Question

我有一个mongodb文件，我正在使用axios ajax调用。该文档有一个对象数组，它还包含一个嵌套的对象数组。每个对象都分配了一个mongo id。最顶层的数据显示在相应的最顶层的Presentation组件中，但后续的对象数组不会显示在它们的相对Presentation组件中。我得到的错误是。 “TypeError：this.props.card.rdfts未定义” ，但显示的是非数组兄弟。然而，当我查看react dev工具和redux dev工具时，对象数组就在那里，并且作为包含对象数组的对象数组。

我搜索了无数的stackoverflow artiles以及无数的github文章。我尝试了很多不同的方法但似乎没什么用。

我的mongodb docuent是......

{
"_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承诺似乎并没有停止停止控制流程。我最初希望得到解决然后渲染的承诺，但似乎当时只是通过并立即调用渲染。我想知道对象数组是否未及时实例化，或者它似乎无法正常工作。

如果您看一下我的控制台，您会看到我在解决承诺之前遇到错误，但这应该无关紧要，因为反应是直接从状态树中读取的。更新状态树后，应该更新react。正确？

15：40：24.978获取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获取XHR   myhttpurl.herokuapp.com/api/Rationale/Restraint/Model/1 [HTTP / 1.1 200   好的143ms]

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

Answer 1

丹·阿布拉莫夫已经明白了这一点。 https://github.com/paularmstrong/normalizr。 Normalizer是我需要的。 :)谢谢Dan.Also也得到了Cory的帮助。

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

1 个答案: