在React中使用onClick从一个数组中删除项并放入另一个数组中

import React, { useState } from 'react';

const ExampleComponent = () => {
  const [originalArray, setOriginalArray] = useState([]);
  const [deletedArray, setDeletedArray] = useState([]);

  // 其他代码...

  return (
    // 组件的JSX代码...
  );
};

export default ExampleComponent;

return (
  <div>
    <h2>原始数组：</h2>
    <ul>
      {originalArray.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={() => handleDelete(index)}>删除</button>
        </li>
      ))}
    </ul>

    <h2>删除数组：</h2>
    <ul>
      {deletedArray.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </div>
);

const handleDelete = (index) => {
  const deletedItem = originalArray[index];

  setOriginalArray((prevArray) => {
    const newArray = [...prevArray];
    newArray.splice(index, 1);
    return newArray;
  });

  setDeletedArray((prevArray) => [...prevArray, deletedItem]);
};