高效管理React/Next.js中数组对象的移动与渲染：深入理解唯一标识符

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

// 假设 Ser 和 SearchEngine/SearchEngineDetail 类型已定义
interface SerItem {
  ser: {
    id: string;
    url: string;
    text: string;
  };
  search_engine_source: {
    search_engine: SearchEngine; // 假设 SearchEngine 是一个枚举
    detail: SearchEngineDetail; // 假设 SearchEngineDetail 是一个枚举
  };
  isChecked: boolean;
}

// 示例枚举定义（实际项目中应有更详细的定义）
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

function MyComponent() {
  const [riskSummary, setRiskSummary] = useState<SerItem[]>([
    {
      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<SerItem[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: '中立标题一' }, // 优化：确保初始文本唯一
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '4', url: 'https://example.com', text: '中立标题二' }, // 优化：确保初始文本唯一
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', 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. 更新 riskSummary：将选中的项添加进去，并生成新的唯一ID
    const updatedRiskSummary = [...riskSummary];
    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 为移动后的项生成新的唯一ID
        isChecked: false, // 移动后重置选中状态
      };
      updatedRiskSummary.push(newItem);
    });

    // 3. 更新 neutralSummary：移除被选中的项
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

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

  const handleArrowLineLeftClick = () => {
    // 1. 筛选出 riskSummary 中被选中的项
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    // 2. 更新 neutralSummary：将选中的项添加进去，并生成新的唯一ID
    const updatedNeutralSummary = [...neutralSummary];
    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 为移动后的项生成新的唯一ID
        isChecked: false, // 移动后重置选中状态
      };
      updatedNeutralSummary.push(newItem);
    });

    // 3. 更新 riskSummary：移除被选中的项
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

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

  return (
    <div className="flex"> {/* 假设 Flex 是一个布局组件 */}
      <div className="col-span-5 h-max">
        {/* List 组件需要接收 items 数组、标题和 onChange 回调 */}
        <List
          listItems={neutralSummary}
          listTitle="中立まとめ"
          onChange={handleNeutralSummary}
        />
      </div>

      <div className="col-span-2 h-max self-center flex flex-col items-center">
        {/* Button 组件需要 onClick 事件和图标名称 */}
        <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 组件的简化示例
interface ListProps {
  listItems: SerItem[];
  listTitle: string;
  onChange: (index: number) => void;
}

const List: React.FC<ListProps> = ({ listItems, listTitle, onChange }) => {
  return (
    <div>
      <h3>{listTitle}</h3>
      <ul>
        {listItems.map((item, index) => (
          // 确保这里的 key 是稳定且唯一的
          // item.ser.id 是最佳选择，因为它在移动时会重新生成
          <li key={item.ser.id}> 
            <input
              type="checkbox"
              checked={item.isChecked}
              onChange={() => onChange(index)}
            />
            <span>{item.ser.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};