无法将对象数组传递到useState列表

import React, { useState } from 'react';

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

  const [data, setData] = useState(JSON.stringify(initialData));

  const handleButtonClick = () => {
    const parsedData = JSON.parse(data);
    // 对对象数组进行操作
    // ...
  };

  return (
    <div>
      <button onClick={handleButtonClick}>操作对象数组</button>
    </div>
  );
};

export default MyComponent;