如何在React中替换对象数组的值

import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ]);

  // 其他组件代码...

  return (
    // JSX代码...
  );
}

export default MyComponent;

const replaceValue = () => {
  setData(data.map(item => {
    if (item.id === 2) {
      return { ...item, name: 'Mary' };
    }
    return item;
  }));
}

return (
  <div>
    <button onClick={replaceValue}>替换值</button>
    {/* 其他组件内容 */}
  </div>
);