如何在Reactjs中用useState更新具有数组的嵌套对象？

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York',
    },
  });

  // 其他组件逻辑...

  return (
    // 组件的JSX代码...
  );
}

function MyComponent() {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York',
    },
  });

  const updateHobbies = () => {
    setData(prevData => ({
      ...prevData,
      hobbies: [...prevData.hobbies, 'swimming'],
    }));
  };

  // 其他组件逻辑...

  return (
    <div>
      <button onClick={updateHobbies}>Add Hobby</button>
    </div>
  );
}