如何从React UL中删除HTML /LI

import React, { useState } from 'react';

function MyComponent() {
  const [listItems, setListItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  // 其他组件代码...

  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

import React, { useState } from 'react';

function MyComponent() {
  const [listItems, setListItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const deleteListItem = (index) => {
    const updatedListItems = [...listItems];
    updatedListItems.splice(index, 1);
    setListItems(updatedListItems);
  };

  // 其他组件代码...

  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={() => deleteListItem(index)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

export default MyComponent;