如何在ReactJS中使用状态更新数组

import React, { useState } from 'react';

function App() {
  // 初始化状态为一个空数组
  const [items, setItems] = useState([]);

  // 添加新项到数组
  const addItem = () => {
    const newItem = `Item ${items.length + 1}`;
    setItems([...items, newItem]); // 使用展开运算符来复制数组并添加新项
  };

  // 删除数组中的特定项
  const removeItem = (index) => {
    const newItems = items.filter((_, i) => i !== index);
    setItems(newItems);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;