如何在状态中迭代嵌套对象以在屏幕上渲染值？

// 假设状态中的data对象如下所示
const data = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    country: 'USA'
  }
};

// 在前端页面中迭代和渲染嵌套对象的值
function renderData() {
  // 渲染name和age属性的值
  document.getElementById('name').textContent = data.name;
  document.getElementById('age').textContent = data.age;

  // 判断address属性是否存在
  if (data.address) {
    // 渲染address属性中的嵌套对象的值
    document.getElementById('street').textContent = data.address.street;
    document.getElementById('city').textContent = data.address.city;
    document.getElementById('country').textContent = data.address.country;
  }
}

// 调用renderData函数进行渲染
renderData();