真正的原因是时间

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);

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

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 error。它不允许我将posts变量传递给Object.keys。为什么？

Answer 1

如果仅需要搜索Json字符串或数据，则可以使用查询语言：

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

（等同于XQuery for JSON）

Answer 2

您需要的是递归搜索，这种搜索起初很复杂且令人生畏，但实践起来变得容易得多。对于React维护者来说，很难提供恰恰是您想要的工具，但是JS生态系统中有很多实用程序可以为您提供帮助。

使用lodash的示例在嵌套对象中搜索键“ pizza”并返回值数组：

let { reduce } = require('lodash')
const o = { one: { pizza: 1, spaghetti: 2 }, pizza:3 }

const f = (o) => reduce(o, (acc, val, key) => {
    if(typeof val == 'object') acc = acc.concat(f(val))
    else if (key == 'pizza') acc = acc.concat(val)
    return acc
}, [])
f(o)
>[1,3]

但是您似乎想使用正则表达式搜索来找到您的密钥，例如与String.prototype.match

Answer 3

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

const data = this.state.myPosts;

const posts = data.content;

console.log(posts);

但是当我尝试使用该post变量来映射嵌套对象的属性时，出现错误。

真正的原因是时间

在组件加载数据render时两次（至少）进行响应-一次安装（初始状态，尚无数据），第二次由setState强制（加载数据））。 这是一个众所周知的问题，而且很容易解决-只需在适当的级别上测试对象属性即可：

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);

    if(!posts) return <Loading/>

    //
    // there you can safely use posts for looping
    //

反应：遍历深层嵌套的对象并显示它们而不会扯掉我的头发

3 个答案:

真正的原因是时间