React/Next.js中实现列表项的动态选择与移动

花韻仙語

发布时间：2025-12-01 14:32:02

584人浏览过

来源于php中文网

原创

react/next.js中实现列表项的动态选择与移动

本教程详细介绍了如何在React/Next.js应用中实现列表项在两个数组间的动态选择与移动功能。我们将探讨如何使用`useState`管理列表状态、确保数据更新的不可变性，并重点强调在处理列表渲染时，为每个列表项提供稳定且唯一的标识符（`key` prop）的重要性，以避免因数据重复或渲染机制导致的潜在问题。

在现代前端应用中，管理和操作列表数据是常见的需求，尤其是在需要用户从一个列表中选择项目并将其移动到另一个列表的场景。本教程将深入讲解如何在React或Next.js项目中，利用Hooks（如useState）和事件处理函数，实现这一功能，并着重强调在开发过程中容易被忽视的关键细节。

1. 核心概念与状态管理

实现列表项的动态移动，首先需要妥善管理两个列表的状态。在React中，useState是管理组件内部状态的理想选择。

1.1 定义列表状态

我们通常会使用两个状态变量来分别存储两个列表的数据。每个列表项都应该是一个包含必要属性的对象，例如一个唯一的id、显示文本text，以及一个用于标记是否被选中的isChecked布尔值。

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid'; // 用于生成唯一ID

// 定义列表项的类型
interface SerItem {
  id: string;
  url: string;
  text: string;
}

interface ListItem {
  ser: SerItem;
  search_engine_source: {
    search_engine: SearchEngine; // 假设 SearchEngine 是一个枚举类型
    detail: SearchEngineDetail; // 假设 SearchEngineDetail 是一个枚举类型
  };
  isChecked: boolean;
}

// 假设的枚举类型定义
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

function ListMover() {
  const [riskSummary, setRiskSummary] = useState<ListItem[]>([
    {
      ser: { id: '1', url: 'https://example.com', text: '株式会社ABC 退会/解約率 - ブログ' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '2', url: 'https://example.com', text: 'Longwebsitename|SampleSample|SampleSampleSampleSample...' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const [neutralSummary, setNeutralSummary] = useState<ListItem[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: 'title1' }, // 示例数据，确保text也唯一
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '4', url: 'https://example.com', text: 'title2' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', text: 'title3' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  // ... (后续的事件处理函数)

1.2 处理列表项选择

当用户点击列表中的某个项时，我们需要切换其isChecked状态。这需要一个事件处理函数，并且在更新状态时，必须遵循React的不可变性原则。这意味着我们不能直接修改原始数组或对象，而应该创建新的数组和对象。

  const handleRiskSummary = (index: number) => {
    // 创建一个新数组，避免直接修改原始状态
    const updatedListItems = [...riskSummary];
    // 创建一个新对象来更新特定项的isChecked属性
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setRiskSummary(updatedListItems);
  };

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setNeutralSummary(updatedListItems);
  };

在上述代码中，我们使用了展开运算符（...）来创建数组和对象的浅拷贝，然后只修改需要更新的部分，确保了状态更新的不可变性。

2. 实现列表项的移动逻辑

列表项的移动通常涉及两个主要步骤：识别被选中的项，然后将这些项从源列表移除并添加到目标列表。

2.1 从中立列表移动到风险列表（向右）

当用户点击“向右”按钮时，我们将neutralSummary中所有被选中的项移动到riskSummary。

SekoTalk

商汤科技推出的AI对口型视频创作工具

下载

  const handleArrowLineRightClick = () => {
    // 1. 筛选出neutralSummary中所有被选中的项
    const selectedItems = neutralSummary.filter((item) => item.isChecked);

    // 2. 创建新的riskSummary数组
    const updatedRiskSummary = [...riskSummary];

    // 3. 创建新的neutralSummary数组，只包含未被选中的项
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

    // 4. 将选中的项添加到updatedRiskSummary
    selectedItems.forEach((item) => {
      const newItem = {
        ...item, // 复制所有现有属性
        ser: { ...item.ser, id: uuidv4() }, // 为移动后的项生成新的唯一ID
        isChecked: false, // 移动后重置选中状态
      };
      updatedRiskSummary.push(newItem);
    });

    // 5. 更新状态
    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

2.2 从风险列表移动到中立列表（向左）

“向左”移动的逻辑与“向右”移动对称。

  const handleArrowLineLeftClick = () => {
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedNeutralSummary = [...neutralSummary];
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 同样生成新的唯一ID
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

    setNeutralSummary(updatedNeutralSummary);
    setRiskSummary(updatedRiskSummary);
  };

3. 关键注意事项：唯一标识符（key prop）的重要性

在上述代码逻辑中，我们已经确保了在移动项目时会生成新的uuidv4()作为id。这对于React列表渲染至关重要。React使用key prop来高效地识别列表中哪些项被添加、移除、更新或重新排序。每个列表项的key必须是稳定且唯一的。

3.1 为什么key是关键？

如果列表中的多个项具有相同的key，或者key在使用过程中发生变化，React将无法正确识别这些项，这可能导致：

渲染错误或不一致： 列表项的顺序、选中状态或其他UI状态可能混乱。
性能问题： React可能无法有效复用DOM元素，导致不必要的重新渲染。
难以调试的Bug： 就像原始问题中描述的“选择多个数据时出现奇怪结果”，这通常是由于React在内部处理具有相同标识符的元素时产生了混淆。

3.2 原始问题分析与解决方案

根据原始问题描述，尽管代码逻辑在某些情况下有效，但在选择多个数据时会失败，而解决方案是确保列表项的text属性也具有唯一性。这暗示了以下可能性：

List组件内部的key使用不当： 尽管我们在移动时生成了新的id，但如果渲染列表的List组件（在示例代码中未提供）没有正确地使用item.ser.id作为其key prop，或者在某些情况下回退到使用非唯一属性（如item.ser.text）作为key，那么当多个项的text相同时，就会出现问题。
视觉或交互上的混淆： 即使key使用正确，如果多个列表项在视觉上（例如它们的text内容）完全相同，用户在选择或查看时也可能感到混淆，导致操作上的“奇怪结果”。

最佳实践：

始终为列表项提供一个稳定且全局唯一的id。 uuidv4()是生成此类ID的好方法。
确保你的列表渲染组件（如示例中的List组件）将这个唯一id作为key prop传递给每个子项。

例如，如果你的List组件内部是这样渲染的：

// List.tsx (假设的List组件)
interface ListProps {
  listItems: ListItem[];
  listTitle: string;
  onChange: (index: number) => void;
}

const List: React.FC<ListProps> = ({ listItems, listTitle, onChange }) => {
  return (
    <div>
      <h3>{listTitle}</h3>
      <ul>
        {listItems.map((item, index) => (
          // 关键：使用 item.ser.id 作为 key
          <li key={item.ser.id} onClick={() => onChange(index)}>
            <input type="checkbox" checked={item.isChecked} readOnly />
            {item.ser.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

确保key={item.ser.id}是正确且高效的实践。

4. 完整代码示例（包含UI部分）

将所有逻辑整合到一起，并假设有一个简单的List组件和Button组件：

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// 定义列表项的类型
interface SerItem {
  id: string;
  url: string;
  text: string;
}

interface ListItem {
  ser: SerItem;
  search_engine_source: {
    search_engine: SearchEngine;
    detail: SearchEngineDetail;
  };
  isChecked: boolean;
}

// 假设的枚举类型定义
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

// 假设的 List 组件
interface ListProps {
  listItems: ListItem[];
  listTitle: string;
  onChange: (index: number) => void;
}

const List: React.FC<ListProps> = ({ listItems, listTitle, onChange }) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px', minHeight: '200px' }}>
      <h4>{listTitle}</h4>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {listItems.map((item, index) => (
          // 确保使用 item.ser.id 作为 key
          <li key={item.ser.id} onClick={() => onChange(index)} style={{ cursor: 'pointer', padding: '5px', background: item.isChecked ? '#e0e0e0' : 'transparent' }}>
            <input
              type="checkbox"
              checked={item.isChecked}
              onChange={() => onChange(index)} // 确保checkbox点击也能触发onChange
              style={{ marginRight: '5px' }}
            />
            {item.ser.text} (ID: {item.ser.id.substring(0, 4)}...)
          </li>
        ))}
      </ul>
    </div>
  );
};

// 假设的 Button 组件
interface ButtonProps {
  onClick: () => void;
  iconName: string; // 例如 'ArrowLineRight', 'ArrowLineLeft'
  className?: string; // 样式类名
}

const Button: React.FC<ButtonProps> = ({ onClick, iconName, className }) => {
  return (
    <button
      onClick={onClick}
      style={{
        margin: '5px',
        padding: '10px 15px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
        ... (className === '!bg-secondary hover:!bg-neutral' ? { backgroundColor: '#6c757d' } : {}) // 模拟样式
      }}
    >
      {iconName}
    </button>
  );
};

// 假设的 Flex 组件，用于布局
const Flex: React.FC<{ direction: 'col' | 'row'; className?: string; alignItems?: 'center'; children: React.ReactNode }> = ({ direction, className, alignItems, children }) => {
  return (
    <div style={{ display: 'flex', flexDirection: direction === 'col' ? 'column' : 'row', alignItems: alignItems, ...(className?.includes('col-span-') ? { flex: 1 } : {}) }}>
      {children}
    </div>
  );
};


function App() {
  const [riskSummary, setRiskSummary] = useState<ListItem[]>([
    {
      ser: { id: '1', url: 'https://example.com', text: '风险项 A' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '2', url: 'https://example.com', text: '风险项 B' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const [neutralSummary, setNeutralSummary] = useState<ListItem[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: '中立项 1' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '4', url: 'https://example.com', text: '中立项 2' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', text: '中立项 3' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const handleRiskSummary = (index: number) => {
    const updatedListItems = [...riskSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setRiskSummary(updatedListItems);
  };

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setNeutralSummary(updatedListItems);
  };

  const handleArrowLineRightClick = () => {
    const selectedItems = neutralSummary.filter((item) => item.isChecked);
    const updatedRiskSummary = [...riskSummary];
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 生成新的唯一ID
        isChecked: false,
      };
      updatedRiskSummary.push(newItem);
    });

    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

  const handleArrowLineLeftClick = () => {
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedNeutralSummary = [...neutralSummary];
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 生成新的唯一ID
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

    setNeutralSummary(updatedNeutralSummary);
    setRiskSummary(updatedRiskSummary);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
      <Flex direction="col" className="col-span-5 h-max">
        <List
          listItems={neutralSummary}
          listTitle="中立まとめ"
          onChange={handle

React 条件渲染自定义组件中 children 提前执行问题的解决方案

如何在 React 中使用 useEffect 持久化按钮背景色状态

如何在 React Line Chart 中实现每三个小时仅显示一个时间标签

如何在 React Native 中仅为特定屏幕禁用硬件加速

如何在 React Native 中为特定屏幕禁用硬件加速