React中列表项双向移动：高效管理数组对象与常见陷阱解析

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid'; // 确保安装 uuid 库

// 假设 Ser 和 SearchEngine, SearchEngineDetail 类型已定义
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

interface SerItem {
  id: string;
  url: string;
  text: string;
}

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

function MyComponent() {
  const [riskSummary, setRiskSummary] = useState<Ser[]>([
    {
      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<Ser[]>([
    {
      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' }, // 示例中已优化为唯一text
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', text: 'title3' }, // 示例中已优化为唯一text
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  // ... (后续函数)
}

  const handleRiskSummary = (index: number) => {
    const updatedListItems = [...riskSummary]; // 创建副本
    updatedListItems[index].isChecked = !updatedListItems[index].isChecked; // 修改副本
    setRiskSummary(updatedListItems); // 更新状态
  };

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

  const handleArrowLineRightClick = () => {
    // 1. 从 neutralSummary 中筛选出被选中的项
    const selectedItems = neutralSummary.filter((item) => item.isChecked);
    // 2. 从 neutralSummary 中筛选出未被选中的项，作为 neutralSummary 的新状态
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

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

    // 4. 更新两个列表的状态
    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

  const handleArrowLineLeftClick = () => {
    // 逻辑与向右移动类似，只是源和目标列表互换
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    const updatedNeutralSummary = [...neutralSummary];
    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() },
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

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

// ... 在 MyComponent 函数内部的 return 语句中
return (
    <div className="flex"> {/* 假设的 Flex 布局 */}
        <div className="col-span-5 h-max">
            {/* 中立列表 */}
            <List
                listItems={neutralSummary}
                listTitle="中立まとめ"
                onChange={handleNeutralSummary} // 传递选择处理函数
            />
        </div>

        <div className="col-span-2 h-max self-center flex flex-col items-center">
            {/* 移动按钮 */}
            <Button
                onClick={handleArrowLineRightClick}
                className="!bg-secondary hover:!bg-neutral"
                iconName="ArrowLineRight"
            />
            <Button
                onClick={handleArrowLineLeftClick}
                className="!bg-secondary hover:!bg-neutral"
                iconName="ArrowLineLeft"
            />
        </div>
        <div className="col-span-5 h-max">
            {/* 风险列表 */}
            <List
                listItems={riskSummary}
                listTitle="リスクまとめ"
                onChange={handleRiskSummary} // 传递选择处理函数
            />
        </div>
    </div>
);

// 假设您的 List 组件内部渲染逻辑类似这样
function List({ listItems, onChange }) {
  return (
    <ul>
      {listItems.map((item, index) => (
        <li key={item.ser.id} onClick={() => onChange(index)}> {/* 使用 item.ser.id 作为 key */}
          <input
            type="checkbox"
            checked={item.isChecked}
            readOnly // 或者提供 onChange 处理
          />
          {item.ser.text}
        </li>
      ))}
    </ul>
  );
}