Блог

я понятия не имею, почему useEffect работает так, при обновлении состояния и добавлении элементов в SearchData(состояние использования) он работает правильно и обновляет состояние, но когда я удаляю элемент из SearchData, useEffect не запускается.

основная функция

 const tableSearch = (e) => {
    let value = e.currentTarget.value;
    let input = e.currentTarget;
    let mainData = props.data;
    let itemKey = e.currentTarget.parentNode.parentNode.id;
    if (input.checked) {
      addEl(mainData, itemKey, value);
    }
    if (!input.checked) {
      deleteEl(itemKey, value);
    }
  };
   

добавить элемент (это работает правильно)

  //add element on check
  const addEl = (mainData, itemKey, value) => {
    for (let i = 0; i < mainData.length; i  ) {
      if (mainData[i][itemKey] !== null amp;amp; mainData[i][itemKey].includes(value)) {
        tempData.push(mainData[i])
      }
    }
    if(searchData){
        let tempArr = tempData.concat(searchData)
        setSearchData(tempArr)
    }else{
        setSearchData(tempData)
    }
    
  }; 

проблема здесь (удалить элемент)

  //delete element on uncheck
  const deleteEl = (itemKey, value) => {
    for (let i = 0; i < searchData.length; i  ) {
      if (searchData[i][itemKey].includes(value)) {
          console.log(searchData[i][itemKey])
        let index = searchData.indexOf(searchData[i]);
        searchData.splice(index, 1);
      }
    }
    setSearchData(searchData);
  };

  useEffect(() => {
    if (searchData) {
      setData(searchData);
    pagination();
    }
  }, [searchData]); 

вы не можете так поступить с searchData (searchData.splice), вы можете установить его только с помощью setSearchData

 const deleteEl = (itemKey, value) => {
    setSearchData(data=>{
        for (let i = 0; i < data.length; i  ) {
            if (data[i][itemKey].includes(value)) {
                console.log(data[i][itemKey])
                let index = data.indexOf(data[i]);
                data.splice(index, 1);
            }
        }
        return data;
   })
};
 

Вы не можете обновить состояние таким образом (в вашей функции удаления). Используйте временную переменную, как вы делали в своей функции addEl, а затем обновите состояние с ее помощью. Что-то вроде

 const deleteEl = (itemKey, value) => {
    let tempArr = searchData
    for (let i = 0; i < tempArr.length; i  ) {
      if (tempArr[i][itemKey].includes(value)) {
          console.log(tempArr[i][itemKey])
        let index = tempArr.indexOf(searchData[i]);
        tempArr.splice(index, 1);
      }
    }
    setSearchData(tempArr);
  };