Объект не удаляется из массива после взаимодействия с флажком ввода ⇐ Javascript

[Anonymous]

Я пытаюсь достичь следующего: < /p>
Когда входной флажок - true < /code>: < /p>

• Добавить объект Sites Marray и локальное хранилище < /li>
  < /ul>
  , когда входной флажок является false < /code>: < /p>
  
  . state and local storage

The problem I experience right now is my setSites state updating function is not removing the object from local storage or from sites state
Heres method I use to delete the object and also remove from local storage(suggested via React docs here)

Код: Выделить всё

const index = sites.findIndex((site) => site.url.includes(domain));
setSites(sites.filter((site, i) => index !== site[i]));

Heres Full App.jsx , где я запускаю выше из HandleLogs () function
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
const [sites, setSites] = useState([]);

useEffect(() => {
chrome.storage.local.get(['sites'], (res) => {
if (res.sites) {
setSites(res.sites);
console.log(`Loaded from storage`, res.sites);
}
});
}, []);

useEffect(() => {
chrome.storage.local.set({ sites });
console.log('Saved to storage:', sites);
}, [sites]);

function handleLogs(event) {
chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
const domain = tabs[0].url.split('/')[2];
const fullURL = tabs[0].url;

if (event.target.checked === false) {
// remove current site from sites array
const index = sites.findIndex((site) => site.url.includes(domain));
setSites(sites.filter((site, i) => index !== site));

// store new sites in local storage
chrome.storage.local.set({ sites });

// remove ?tracking
const newUrl = fullURL.replace('?tracking', '');
chrome.tabs.update(tabs[0].id, { url: newUrl });
} else {
if (fullURL.includes('?tracking')) {
console.log('Url already contains tracking');
return;
}

// push new site to array and save to local storage
setSites((prevSites) => [
...prevSites,
{ url: domain }
]);
chrome.storage.local.set({ sites });

// Decorate URL with parameter
const params = encodeURI('tracking');
const url = tabs[0].url;
const hashStart =
url.indexOf('#') === -1 ? url.length : url.indexOf('#');
const querySymbol = url.indexOf('?') === -1 ? '?' : '&';
var newUrl = `${url.substring(
0,
hashStart
)}${querySymbol}${params}${url.substring(hashStart)}`;

// Refresh page with new URL
chrome.tabs.update(tabs[0].id, { url: newUrl });
}
});
}

return handleLogs(event)} />;
};

const container = document.createElement('div');
document.body.appendChild(container);
const root = createRoot(container);
root.render();
< /code>
Немного сложно отлаживать это в браузере, поскольку процесс Webpack выводит комплект. Все еще работаю над этим. Но что я здесь делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/795 ... t-checkbox