React：迭代深度嵌套的对象并显示它们而不会撕裂我的头发

Posted 2021-04-08

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

答案

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

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

（相当于JQuery的XQuery）

另一答案

你需要的是一个递归搜索，它起初很复杂和令人生畏，但通过练习变得更容易。 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

另一答案

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

const data = this.state.myPosts;

const posts = data.content;

console.log(posts);

但是当我尝试使用该posts变量映射嵌套对象的属性时，我得到一个错误。

The real reason is TIME

在响应组件加载数据时，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
    //