如何访问 ReactJS 中的嵌套对象？

ReactJS 中对象的结构可以嵌套多次，并且很快就会变得复杂。如果我们想访问嵌套对象的所有值，那么我们必须使用递归来访问该对象的每一层。

嵌套对象示例：

var person = {
      "name":"Kapil",
      "age":27,
      "vehicles": {
         "car":"city 100",
         "bike":"ktm-duke",
         "plane":"lufthansa"
      }
     }

根据对象的嵌套，它可以变得更复杂。这就是为什么我们必须使用递归来获取所有值并访问整个嵌套对象的原因。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
  
class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      person: {
        name: {
          first: "Kapil",
          last: "Chhipa"
        },
        age: 23,
        key1: {
          key2: {
            key3: {
              val: "Welcome to GeeksforGeeks"
            }
          }
        }
      }
    };
  }
  
  helper = (obj) => {
    const values = Object.values(obj)
  
    values.forEach(val =>
      val && typeof val === "object" ? 
      this.helper(val) : this.addtoConsole(val))
  }
  
  addtoConsole = (val) => {
    console.log(val)
  }
  
  render() {
    return (
      

         {
          this.helper(this.state.person)
        }}>click here
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：