Início / coding / Perguntas / 79582797
Accepted
Samuel
Asked: 2025-04-20 04:07:35 +0800 CST

O estado não está persistindo em popup.html por meio do armazenamento do Chrome

  • 772

Eu esperava o seguinte

  • Para handleLogs()armazenar { site: 'https://google.com' }no estado dos sites e armazenar no armazenamento local do Chrome
  • Para useEffecto gancho pegar o array de sites e salvar no estado do site sempre que o pop-up for aberto

O problema atual é que sempre que abro o pop-up, o site[] está sempre vazio. Consigo ver, através das ferramentas de desenvolvimento, que o site é adicionado ao estado e ao armazenamento no armazenamento local na interação inicial com a entrada. Mas, em aberturas subsequentes, sem interação com a entrada, aparece um array de sites vazio no estado e no armazenamento local. Por quê?

Abaixo está uma versão simplificada real do código que tenho em app.jsxarquivo

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

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

    function handleLogs(event) {
        setSites((prevSites) => [...prevSites, { site: 'https://google.com' }]);
        chrome.storage.local.set({ sites });
    }

    return <input type="checkbox" onClick={() => handleLogs(event)} />;
};
javascript

1 respostas

  1. Best Answer

    O problema aqui é que você está chamando chrome.storage.local.set({ sites }) imediatamente após setSites, mas as atualizações de estado do React são assíncronas. Isso significa que, no momento em que chrome.storage.local.set() é chamado, sites ainda é o valor antigo, ainda não atualizado.

    Seu código atual tem esta linha dentro de handleLogs:

    setSites((prevSites) => [...prevSites, { site: 'https://google.com' }]);
chrome.storage.local.set({ sites });

    Para corrigir isso, você deve usar um gancho useEffect para monitorar sites e atualizar o armazenamento do Chrome somente depois que o estado for realmente atualizado.

    Código atualizado e funcional

    import React, { useEffect, useState } from 'react';

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

    // Load saved sites from local storage when popup opens
    useEffect(() => {
        chrome.storage.local.get(['sites'], (res) => {
            if (res.sites) {
                setSites(res.sites);
                console.log('Loaded from storage:', res.sites);
            }
        });
    }, []);

    // Save to Chrome storage whenever `sites` changes
    useEffect(() => {
        chrome.storage.local.set({ sites });
        console.log('Saved to storage:', sites);
    }, [sites]);

    function handleLogs() {
        setSites((prevSites) => [...prevSites, { site: 'https://google.com' }]);
    }

    return <input type="checkbox" onClick={handleLogs} />;
};

export default App;

    Observe que, se você abre e fecha o pop-up com frequência (comum em extensões do Chrome), lembre-se de que o estado do React é redefinido toda vez, então você deve sempre confiar em chrome.storage.local como a fonte da verdade.

    • 2

relate perguntas