使用react钩子usestate用另一个对象替换现有的状态对象

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    email: 'john@example.com'
  });

  // ...
}

function MyComponent() {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    email: 'john@example.com'
  });

  const replaceData = () => {
    const newData = {
      name: 'Jane',
      age: 30,
      email: 'jane@example.com'
    };

    setData(newData);
  };

  return (
    <div>
      {/* 渲染状态对象的属性 */}
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <p>Email: {data.email}</p>

      {/* 替换现有的状态对象 */}
      <button onClick={replaceData}>Replace Data</button>
    </div>
  );
}

function MyComponent() {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    email: 'john@example.com'
  });

  const updateData = () => {
    setData(prevData => ({
      ...prevData,
      age: prevData.age + 1
    }));
  };

  return (
    <div>
      {/* 渲染状态对象的属性 */}
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <p>Email: {data.email}</p>

      {/* 更新状态对象 */}
      <button onClick={updateData}>Update Data</button>
    </div>
  );
}