运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

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

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。

  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 从风险列表移动到中立列表（向左）

DubbingX智声云配 Du*gX智声云配

多情绪免费克隆AI音频工具

DubbingX智声云配 975 查看详情 DubbingX智声云配

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

  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属性也具有唯一性。这暗示了以下可能性：

  1. List组件内部的key使用不当： 尽管我们在移动时生成了新的id，但如果渲染列表的List组件（在示例代码中未提供）没有正确地使用item.ser.id作为其key prop，或者在某些情况下回退到使用非唯一属性（如item.ser.text）作为key，那么当多个项的text相同时，就会出现问题。
  2. 视觉或交互上的混淆： 即使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/Next.js中实现列表项的动态选择与移动的详细内容，更多请关注其它相关文章！


# 创建一个  # seo该怎么写标题  # 山东整站seo优化系统  # 企业视频营销网络推广  # 杭州百度关键词排名外包  # 如何做营销号微信推广  # 延庆小企业网站建设  # 兰州网站优化哪家快  # 厦门专业seo优化推广公司  # 宝鸡公司网站优化建设  # 建湖seo优化品牌  # 过程中  # 输入框  # 与非  # 移除  # react  # 表单  # 运算符  # 列表中  # 是一个  # 多个  # 为什么  # 前端应用  # google  # ai  # app  # go  # node  # 前端  # js 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： QQ邮箱手机版网页版 QQ邮箱登录入口地址  被称为海蜈蚣的海洋动物是  深入理解随机递归函数的确定性：内部节点、叶节点与时间复杂度分析  AffinityDesigner图层蒙版怎么用_AffinityDesigner图层蒙版设计应用  Cassandra中复合主键、二级索引与ORDER BY排序的限制与解决方案  Python中处理嵌套字典与列表的数据提取与过滤教程  t3出行如何使用微信支付  如何使用 Optional 类型并满足 Pylint 的类型检查  《爱笔思画x》涂色教程  Magento 2 产品保存事件中安全更新属性的最佳实践  123平台官方登录入口 123邮箱网页端在线沟通工具  歌词怎么展示在|直播|间视频号？有什么注意事项？  海外搜索引擎推广效果怎么样,怎么分析效果！  rabbitmq 持久化有什么缺点？  WooCommerce 新客户订单自动添加管理员备注教程  性能与资源监视器快捷打开  《波斯王子：失落的王冠》剑术大师打法攻略  SQL聚合查询、联接与筛选：GROUP BY 子句的正确使用与常见陷阱  mysql如何配置从库只读_mysql从库只读设置方法  漫蛙漫画官方网站使用_漫蛙manwa网页版在线入口教程  大众点评了却看不到是怎么回事  《书耽》更换手机号方法  抄漫画官网防走失地址_抄漫画最新漫画完整版阅读入口  C++怎么解决数值计算中的精度问题_C++浮点数误差与数值稳定性分析  search中maxlength属性用法解析  猫眼电影app如何参与官方的抽奖活动_猫眼电影官方抽奖参与方法  C#解析来自网络的XML流数据 实时错误处理与重试机制  荣耀magicv5怎么上手测评  PDF如何批量加注释_PDF多文件批注高亮操作教程  windows10怎么更改下载路径_windows10默认存储位置修改教程  可米酷漫画在线阅读入口_ 可米酷漫画官网直达链接  《豆瓣》私信用户方法  快递查询，一键速查  如何在Podman容器中运行Composer_Docker替代品Podman的PHP与Composer容器化实践  Composer如何使用composer-plugin-api开发自定义插件  PySimpleGUI中实现键盘按键与按钮事件绑定教程  如何用mysql开发用户注册登录功能_mysql用户注册登录数据库设计  冬季去哪个城市旅游更有可能观测到极光  Sublime怎么配置YAML文件格式化_Sublime YAML Formatter插件教程  NumPy 高性能技巧：基于多列条件查找最近邻行索引的向量化实现  作业帮网页版不用下载入口 在线问老师快速答疑  优化Asyncio嵌套函数调度：使用生产者-消费者模式实现并发流处理  sf漫画官网登录入口直达_sf漫画官方正版网址  百度竞价WAP显示PC链接问题  《植物大战僵尸3》火龙草作用介绍  在VS Code中利用AI辅助进行代码迁移  哔哩哔哩的|直播|间怎么送礼物_哔哩哔哩|直播|送礼操作指南  FotoBalloon图片左右镜像教程  解决VS Code中Python版本冲突与输出异常的指南  苹果电脑如何快速查看电池状态 苹果电脑电池信息快捷方法 

 2025-12-01

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.