在useState中设置状态
在useState中设置状态
提问于 2020-12-07 23:23:08
如何使用来设置我的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);但这似乎也没有影响。
我想做的事有可能吗？
编辑
您可以使用new Promise()来保证响应。
const [tabs, setTabs] = useState(async () => {
var promise = new Promise((resolve) => {
chrome.storage.sync.get("tabs", (result) => {
resolve(result.tabs);
});
});
return await promise;
});回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-08 01:38:14
问题
var init_tabs = null;
chrome.storage.sync.get("tabs", (result) => {
init_tabs = result.tabs
});
const [tabs, setTabs] = useState(init_tabs);这不起作用的原因有几个：
来自once.
init_tabsreact钩子的
- 状态只在初始化后才会被重置，每个呈现周期都会被重置，而
chrome.storage.sync.get则会调用每个循环，但是init_tabs = result.tabs将是无效的，因为它会在以后的呈现周期中发生。
解决方案
我不太清楚您的tabs状态对象形状是什么，而且您的基于承诺的状态初始化器看起来也可以工作，但是加载状态的一种更标准的反应方式(即习语)是在组件挂载时在useEffect钩子中执行数据“提取/加载”。它从编辑中使用了很多相同的逻辑，但更传统，不需要在承诺中进行包装。
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"从这里开始，如何在填充tabs状态时最好地处理UI呈现，这取决于您自己。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65190897
复制相关文章
相似问题
腾讯云开发者
