React/Next.js中实现列表项的动态移动与状态管理：兼论唯一键的重要性

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

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

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

interface SearchEngineSource {
  search_engine: SearchEngine;
  detail: SearchEngineDetail;
}

interface Ser {
  ser: SerItem;
  search_engine_source: SearchEngineSource;
  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,
    },
  ]);

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

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

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary]; // 创建副本
    updatedListItems[index].isChecked = !updatedListItems[index].isChecked; // 更新副本中的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 = () => {
    // 1. 筛选出 riskSummary 中被选中的项
    const selectedItems = riskSummary.filter((item) => item.isChecked);

    // 2. 筛选出 riskSummary 中未被选中的项，这将成为新的 riskSummary
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    // 3. 为选中的项创建新对象并添加到 neutralSummary
    const updatedNeutralSummary = [...neutralSummary]; // 复制当前的 neutralSummary
    selectedItems.forEach((item) => {
      const newItem = {
        ...item, // 复制所有现有属性
        ser: { ...item.ser, id: uuidv4() }, // 为移动的项生成一个全新的唯一ID
        isChecked: false, // 移动后重置为未选中状态
      };
      updatedNeutralSummary.push(newItem); // 添加到新的 neutralSummary 副本中
    });

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

// List 组件的简化内部实现
// props: { listItems: Ser[], onChange: (index: number) => void }
function List({ listItems, listTitle, onChange }) {
  return (
    <div>
      <h3>{listTitle}</h3>
      <ul>
        {listItems.map((item, index) => (
          <li key={item.ser.id} onClick={() => onChange(index)}> {/* 使用 item.ser.id 作为 key */}
            <input
              type="checkbox"
              checked={item.isChecked}
              onChange={() => onChange(index)}
            />
            {item.ser.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 在父组件中调用 List
// ...
<List
  listItems={neutralSummary}
  listTitle="中立まとめ"
  onChange={handleNeutralSummary}
/>
// ...