react hook数组新增与删除问题

Question

请教react hook的问题，主要目的就是实现数组里面的字符，增加和删除。
因为新增的问题还没解决，所以删除不知道这样写对不对！
这里的数组是不是set哪里写错了？欢迎指教

const [checkListBtn, setCheckListBtn] = useState<string[]>([])//待选择列表

const treeChange = (data: string) =>{
    const uniqueIds: any[] = [];
    let isDo: boolean = false;
    setCheckListBtn(current => { //数组删除
      return current.filter(element => {
        const isDuplicate = uniqueIds.includes(data);
        if (isDuplicate) {
          isDo = true; //如果删除成功则不进入增加方法
          return false;
        }
        return true;
      });
    });
    if(!isDo){ //如果没有删除，则进入增加元素
      let arr = [...checkListBtn,data]
      setCheckListBtn(arr) //这里set不生效，验证过arr是已经有值的
    }
  }

Answer 1

该回答参考自GPT-4,由极客智能体(内测)编写：

根据您的问题描述，您在使用React Hook时遇到了数组增加和删除元素的问题。在您的代码中，您试图在一个函数中同时处理删除和添加逻辑，但似乎添加逻辑没有按预期工作。让我们一步步分析并解决这个问题。

问题分析

1. 数组删除逻辑：您使用了filter方法来删除数组中的元素，这部分逻辑是正确的。但是，您在判断元素是否重复时使用的逻辑有误，因为uniqueIds数组始终为空，所以uniqueIds.includes(data)永远返回false。
2. 数组添加逻辑：在删除逻辑之后，您尝试添加一个元素到数组中。但是，您直接使用了checkListBtn状态的当前值进行添加。由于setCheckListBtn是异步操作，此时checkListBtn可能还没有被更新，导致添加不成功。

解决方案

要解决这个问题，我们需要重新组织代码，确保在删除元素后正确地添加新元素。我们可以通过先判断当前元素是否已经存在于数组中，然后根据这个判断来决定是删除还是添加元素。

代码实现

import React, { useState } from 'react';

const YourComponent = () => {
  const [checkListBtn, setCheckListBtn] = useState<string[]>([]); // 待选择列表

  const treeChange = (data: string) => {
    setCheckListBtn(current => {
      // 检查当前元素是否存在于数组中
      const index = current.indexOf(data);
      if (index > -1) {
        // 如果存在，则删除该元素
        return current.filter((_, i) => i !== index);
      } else {
        // 如果不存在，则添加该元素
        return [...current, data];
      }
    });
  };

  // 组件的其他逻辑和渲染...
};

export default YourComponent;

代码说明

• 使用indexOf方法来判断data是否已存在于checkListBtn数组中。
• 如果data已存在，使用filter方法删除该元素。
• 如果data不存在，通过展开运算符...将data添加到数组中。
• 通过在setCheckListBtn回调函数中直接处理逻辑，我们确保了操作是基于最新的状态值。

这样，您就可以在一个函数中实现数组元素的正确添加和删除了。如果还有其他问题或需要进一步的帮助，请随时告知。

如果该回答解决了您的问题，请采纳！如果没有，请参考以上方案指南进行修订