javascript - react : Iterating through deeply nested objects and displaying them without tearing my hair out

Question

我有一个 API 在对象格式的对象内的深层嵌套对象中返回数据。我试图从这些深度嵌套的对象中获取数据并遍历它们并将它们显示在 React 项目中。

这让我非常头疼，我找不到任何相当简单的方法。

假设我有如下所示的 JSON 数据:

Object {
   Object2 {
     Object3 {
       propertyIWantToAccess1: 'some data',
       propertyIWantToAccess2: 'some more data',
       propertyIWantToAccess3: 10,
       propertyIWantToAccess4: true
     }
   }
}

如何在组件的渲染或返回函数中遍历这些嵌套对象并获取我想要的属性？我认为嵌套 Object.keys.map 的一些变体可能是可行的方法，但我不确定如何执行此操作。

这是否需要涉及 es6 解构(一个我还不太熟悉的概念)或像 lo-dash 这样的库？

编辑澄清:数据不是包含对象的数组。它是一个包含许多嵌套对象的对象

我将 API 中的数据存储在 this.state.myPosts

我可以像这样 console.log 嵌套对象:

    const data = this.state.myPosts;

    const posts = data.content;

    console.log(posts);

但是，当我尝试使用该 posts 变量映射嵌套对象的属性时，出现错误。这不起作用:

render() {
    // Logs data
    console.log(this.state.myPosts);

    const data = this.state.myPosts;

    // Stores nested object I want to access in posts variable
    const posts = data.content;

    // Successfully logs nested object I want to access
    console.log(posts);

    // Error, this will not allow me to pass posts variable to Object.keys
    const display = Object.keys(posts).map(key =>
      <option value={key}>{posts[key]}</option>
    )


    return(
      <div>
        {display}
      </div>
    );
  }

我得到一个 TypeError: can't convert undefined to object 错误。它不允许我将 posts 变量传递给 Object.keys。为什么？

Answer 1

如果您只需要搜索 Json 字符串或数据，您可以使用查询语言:

https://www.npmjs.com/package/json-query

(相当于 JSON 的 XQuery)