No tengo idea de por qué useEffect funciona así, al actualizar el estado y agregar elementos en SearchData (useState) funciona correctamente y actualiza el estado, pero cuando elimino un elemento de SearchData, useEffect no se activa.
función principal
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); } };agregar elemento (este funciona correctamente)
//add element on check const addEl = (mainData, itemKey, value) => { for (let i = 0; i < mainData.length; i++) { if (mainData[i][itemKey] !== null && mainData[i][itemKey].includes(value)) { tempData.push(mainData[i]) } } if(searchData){ let tempArr = tempData.concat(searchData) setSearchData(tempArr) }else{ setSearchData(tempData) } };el problema está aquí (eliminar elemento)
//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]);No puede actualizar el estado así (en su función deleteEl). Use una variable temporal como lo hizo en su función addEl, y luego actualice el estado usando eso. Algo como
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); };no puede hacer eso en searchData (searchData.splice) puede configurarlo solo con 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; }) };