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 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' }, // 修正后的数据
      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,
    },
  ]);

  // 处理选中状态变化的函数
  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);
  };

  // 从 neutralSummary 移动到 riskSummary
  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);
  };

  // 从 riskSummary 移动到 neutralSummary
  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>
      {/* 假设这里是列表和按钮的渲染部分 */}
      {/* <List listItems={neutralSummary} listTitle="中立まとめ" onChange={handleNeutralSummary} /> */}
      <button onClick={handleArrowLineRightClick}>向右移动</button>
      <button onClick={handleArrowLineLeftClick}>向左移动</button>
      {/* <List listItems={riskSummary} listTitle="リスクまとめ" onChange={handleRiskSummary} /> */}
    </div>
  );
}

// 修正后的 neutralSummary 示例
const [neutralSummary, setNeutralSummary] = useState<Ser[]>([
  {
    ser: { id: '3', url: 'https://example.com', text: 'title1' }, // 确保文本唯一
    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,
  },
]);