Reactjs Chrome存储API在useState中设置状态

如何使用Chrome存储API设置react应用程序的初始状态

据我所知，

chrome.storage.sync.get（）

是基于回调的，没有返回值

我试过：

chrome.storage.sync.get("tabs", (result) => {
  const [tabs, setTabs] = useState(result.tabs);
});

但这会导致一个错误，即useState声明不能嵌套在函数中

我也试过：

var init_tabs = null;
chrome.storage.sync.get("tabs", (result) => {
  init_tabs = result.tabs
});
const [tabs, setTabs] = useState(init_tabs);

但这似乎也没有产生影响

我想做的是可能的吗

编辑 您可以使用

newpromise（）

来保证响应

const [tabs, setTabs] = useState(async () => {
  var promise = new Promise((resolve) => {
    chrome.storage.sync.get("tabs", (result) => {
      resolve(result.tabs);
    });
  });

  return await promise;
});

问题 由于以下几个原因，这不起作用：

来自

useState

react钩子的状态只初始化一次

init_tabs

将在每个渲染周期重置，并在每个周期调用

chrome.storage.sync.get

，但

init_tabs=result.tabs

将无效，因为它可能会在稍后的渲染周期中出现

解决方案 我不确定您的

选项卡

状态对象的形状是什么，您基于承诺的状态初始值设定项看起来可以工作，但加载状态的更标准的反应方式（即惯用方式）是在组件装载时在

useffect

钩子中执行数据“获取/加载”。它使用了与您的编辑相同的许多逻辑，但更为传统，不需要被包装在承诺中

const [tabs, setTabs] = useState(/* ... some initial state ... */);

useEffect(() => {
  chrome.storage.sync.get("tabs", (result) => {
    setTabs(result.tabs);
  });
}, []); // <-- empty dependency array to run effect callback once "onMount"

const[tabs，setTabs]=useState（/*…一些初始状态…*/）；
useffect（（）=>{
chrome.storage.sync.get（“制表符”，（结果）=>{
setTabs（result.tabs）；
});
}, []); // 第二个示例失败，因为get调用是异步的。为什么不把get电话写进一个承诺里呢？并在promise上使用
async wait
。这样，您就可以保证在进入初始状态初始化之前执行get值。@codemax谢谢！我学到了一些新东西，似乎已经解决了困扰我几天的问题。让我知道我对问题的编辑是否是一个好方法。是的，看起来不错。也许您可以将
useState
中的承诺提取到它自己的行中，这样您就可以处理
get
调用错误并创建回退值。是的，这就是我正在做的。我也处理拒绝的情况。以前从未承诺过价值观，所以很高兴看到它为什么有用。好的，很好。很高兴你学习了smth new；）这就是我想要的，谢谢你的发帖！我最初是这样做的，但却犯了一些不相关的错误，这让我很反感。你的帖子消除了我所有的困惑，更重要的是，现在我的应用程序按预期工作。
const [tabs, setTabs] = useState(/* ... some initial state ... */);

useEffect(() => {
  chrome.storage.sync.get("tabs", (result) => {
    setTabs(result.tabs);
  });
}, []); // <-- empty dependency array to run effect callback once "onMount"