如何在react typescript中更改数组中的图标

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<Array<any>>([
    { name: 'Item 1', icon: 'icon1' },
    { name: 'Item 2', icon: 'icon2' },
    { name: 'Item 3', icon: 'icon3' },
  ]);

  // 其他组件代码...

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

export default MyComponent;

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<Array<any>>([
    { name: 'Item 1', icon: 'icon1' },
    { name: 'Item 2', icon: 'icon2' },
    { name: 'Item 3', icon: 'icon3' },
  ]);

  // 其他组件代码...

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <span>{item.name}</span>
          <img src={`icons/${item.icon}.svg`} alt={item.icon} />
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<Array<any>>([
    { name: 'Item 1', icon: 'icon1' },
    { name: 'Item 2', icon: 'icon2' },
    { name: 'Item 3', icon: 'icon3' },
  ]);

  const changeIcon = (index: number, newIcon: string) => {
    const newData = [...data];
    newData[index].icon = newIcon;
    setData(newData);
  };

  // 其他组件代码...

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <span>{item.name}</span>
          <img src={`icons/${item.icon}.svg`} alt={item.icon} onClick={() => changeIcon(index, 'newIcon')} />
        </div>
      ))}
    </div>
  );
};

export default MyComponent;