如何在React中迭代嵌套的对象(在屏幕上渲染任何数据并以不可变的方式设置状态)

import React, { Component } from 'react';

class NestedObject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {} // 存储要渲染的数据
    };
  }

  componentDidMount() {
    // 获取要渲染的数据，并存储在state中
    const data = {
      name: 'John',
      age: 25,
      address: {
        street: '123 Main St',
        city: 'New York',
        country: 'USA'
      }
    };
    this.setState({ data });
  }

  renderNestedObject(obj) {
    return Object.keys(obj).map(key => {
      if (typeof obj[key] === 'object') {
        return (
          <div key={key}>
            <strong>{key}: </strong>
            {this.renderNestedObject(obj[key])}
          </div>
        );
      } else {
        return (
          <div key={key}>
            <strong>{key}: </strong>
            {obj[key]}
          </div>
        );
      }
    });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {this.renderNestedObject(data)}
      </div>
    );
  }
}

export default NestedObject;