将对象数组从一个数组移动到另一个数组，单击按钮。

huangapple
go评论107阅读模式
英文:

Moving array of object from one array to another array on button click

问题

在上面的代码中，我已经实现了我的逻辑。

英文:

I have two array of object and two button two move data from one to another after selecting a single or multiple data, but it is not working properly in Nextjs project.

Here is my code snippet! it works in certain case but failed in some cases also.

when I click the arrowfunction button it's work when slecting single data properly but give strange result selecting multiple data.

I have tried many other ways! but none of them was solving the problem. It would be great if anyone of you help in this problem.

  1.   const [riskSummary, setRiskSummary] = useState<Ser[]>([
  2.     {
  3.       ser: {
  4.         id: '1',
  5.         url: 'https://example.com',
  6.         text: '株式会社ABC 退会/解約率 - ブログ',
  7.       },
  8.       search_engine_source: {
  9.         search_engine: SearchEngine.GooglePc,
  10.         detail: SearchEngineDetail.Suggestion,
  11.       },
  12.       isChecked: false,
  13.     },
  14.     {
  15.       ser: {
  16.         id: '2',
  17.         url: 'https://example.com',
  18.         text: 'Longwebsitename|SampleSample|SampleSampleSampleSample...',
  19.       },
  20.       search_engine_source: {
  21.         search_engine: SearchEngine.GooglePc,
  22.         detail: SearchEngineDetail.Suggestion,
  23.       },
  24.       isChecked: false,
  25.     },
  26.   ]);
  28.   const [neutralSummary, setNeutralSummary] = useState<Ser[]>([
  29.     {
  30.       ser: { id: '3', url: 'https://example.com', text: 'title' },
  31.       search_engine_source: {
  32.         search_engine: SearchEngine.GooglePc,
  33.         detail: SearchEngineDetail.Suggestion,
  34.       },
  35.       isChecked: false,
  36.     },
  37.  {
  38.       ser: { id: '4', url: 'https://example.com', text: 'title' },
  39.       search_engine_source: {
  40.         search_engine: SearchEngine.GooglePc,
  41.         detail: SearchEngineDetail.Suggestion,
  42.       },
  43.       isChecked: false,
  44.     },
  45.  {
  46.       ser: { id: '5', url: 'https://example.com', text: 'title' },
  47.       search_engine_source: {
  48.         search_engine: SearchEngine.GooglePc,
  49.         detail: SearchEngineDetail.Suggestion,
  50.       },
  51.       isChecked: false,
  52.     },
  54.   ]);
  56.   const handleRiskSummary = (index: number) => {
  57.     const updatedListItems = [...riskSummary];
  58.     updatedListItems[index].isChecked = !updatedListItems[index].isChecked;
  59.     setRiskSummary(updatedListItems);
  60.   };
  62.   const handleNeutralSummary = (index: number) => {
  63.     const updatedListItems = [...neutralSummary];
  64.     updatedListItems[index].isChecked = !updatedListItems[index].isChecked;
  65.     setNeutralSummary(updatedListItems);
  66.   };
  68.   const handleArrowLineRightClick = () => {
  69.     const selectedItems = neutralSummary.filter((item) => item.isChecked);
  70.     const updatedRiskSummary = [...riskSummary];
  71.     const updatedNeutralSummary = neutralSummary.filter(
  72.       (item) => !item.isChecked,
  73.     );
  75.     selectedItems.forEach((item) => {
  76.       const newItem = {
  77.         ...item,
  78.         ser: { ...item.ser, id: uuidv4() }, // Generate unique IDs using uuidv4
  79.         isChecked: false,
  80.       };
  81.       updatedRiskSummary.push(newItem);
  82.     });
  84.     setRiskSummary(updatedRiskSummary);
  85.     setNeutralSummary(updatedNeutralSummary);
  86.   };
  88.   const handleArrowLineLeftClick = () => {
  89.     const selectedItems = riskSummary.filter((item) => item.isChecked);
  90.     const updatedNeutralSummary = [...neutralSummary];
  91.     const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);
  93.     selectedItems.forEach((item) => {
  94.       const newItem = {
  95.         ...item,
  96.         ser: { ...item.ser, id: uuidv4() }, // Generate unique IDs using uuidv4
  97.         isChecked: false,
  98.       };
  99.       updatedNeutralSummary.push(newItem);
  100.     });
  102.     setNeutralSummary(updatedNeutralSummary);
  103.     setRiskSummary(updatedRiskSummary);
  104.   };
  106.           <List
  107.             listItems={neutralSummary}
  108.             listTitle="中立まとめ"
  109.             onChange={handleNeutralSummary}
  110.           />
  111.         </Flex>
  113.         <Flex
  114.           direction="col"
  115.           className="col-span-2 h-max self-center"
  116.           alignItems="center"
  117.         >
  118.           <Button
  119.             onClick={handleArrowLineRightClick}
  120.             className="!bg-secondary hover:!bg-neutral"
  121.             iconName="ArrowLineRight"
  122.           />
  123.           <Button
  124.             onClick={handleArrowLineLeftClick}
  125.             className="!bg-secondary hover:!bg-neutral"
  126.             iconName="ArrowLineLeft"
  127.           />
  128.         </Flex>
  129.         <Flex direction="col" className="col-span-5 h-max">
  130.           <List
  131.             listItems={riskSummary}
  132.             listTitle="リスクまとめ"
  133.             onChange={handleRiskSummary}
  134.           />
  135.         </Flex>

In the avobe code I have implemented my logic!

答案1

得分: 0

所有的代码逻辑都是正确的！但问题是将相同的文本用作三个对象的标题！当我将名称更改为title1、title2、title3时，问题就解决了。

英文:

ALl the code logic here was right! but the problem was keeping the same text for three objects as title! when I changed the name to tiltle1,title2,title3, the problem solved

huangapple
  • 本文由 发表于 2023年6月22日 04:47:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76527035.html
  • arrays
  • javascript
  • next.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定