通过react中的API调用呈现嵌套对象属性

import React, { useState } from 'react';

function MyComponent() {
  const [nestedObject, setNestedObject] = useState({
    property1: {
      value1: 'Nested Value 1',
      value2: 'Nested Value 2'
    },
    property2: 'Another Value'
  });

  return (
    <div>
      {/* 呈现嵌套对象属性的值 */}
      <p>{nestedObject.property1.value1}</p>
      <p>{nestedObject.property1.value2}</p>
      <p>{nestedObject.property2}</p>
    </div>
  );
}

function MyComponent() {
  const [nestedObject, setNestedObject] = useState({
    property1: {
      value1: 'Nested Value 1',
      value2: 'Nested Value 2'
    },
    property2: 'Another Value'
  });

  const updateNestedValue = () => {
    // 修改嵌套属性的值
    setNestedObject(prevState => ({
      ...prevState,
      property1: {
        ...prevState.property1,
        value1: 'Updated Value 1'
      }
    }));
  };

  return (
    <div>
      {/* 呈现嵌套对象属性的值 */}
      <p>{nestedObject.property1.value1}</p>
      <p>{nestedObject.property1.value2}</p>
      <p>{nestedObject.property2}</p>
      
      {/* 修改嵌套属性的按钮 */}
      <button onClick={updateNestedValue}>Update Value</button>
    </div>
  );
}