React挂钩从数组中删除项并将其添加到另一个数组中

在React中，使用挂钩（Hooks）来管理状态是一种常见的做法。如果你想要从数组中删除一项并将其添加到另一个数组中，你可以使用useState钩子来管理这两个数组的状态，并使用数组的方法来实现这个功能。

基础概念

React Hooks：React Hooks是React 16.8版本引入的新特性，允许你在不编写class的情况下使用state和其他React特性。
useState：这是React Hooks中的一个函数，用于在函数组件中添加state。

类型

在这个场景中，我们主要关注的是useState钩子。

应用场景

列表管理：在需要动态管理列表项的应用中，如待办事项列表。
状态切换：在不同的状态之间切换时，如选中项的管理。

示例代码

以下是一个简单的示例，展示了如何使用useState钩子从一个数组中删除一项并将其添加到另一个数组中：

import React, { useState } from 'react';

function App() {
  const [sourceArray, setSourceArray] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [targetArray, setTargetArray] = useState([]);

  const moveItem = (index) => {
    // 从源数组中移除项
    const [removedItem] = sourceArray.splice(index, 1);
    // 将移除的项添加到目标数组中
    setTargetArray([...targetArray, removedItem]);
  };

  return (
    <div>
      <h2>Source Array</h2>
      <ul>
        {sourceArray.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => moveItem(index)}>Move</button>
          </li>
        ))}
      </ul>
      <h2>Target Array</h2>
      <ul>
        {targetArray.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;