在React TypeScript中Async/Await页面重载

Question

我有一个按钮，当我点击它时，它应该按顺序做以下事情:

• 首先刷新页面
• 然后打开React
中的Side Pane

这是我现有的代码片段:

<button onClick={() => {
refreshPage();
setPaneIsOpen(true);
}}>Click me</button>
const refreshPage = () => {
window.location.reload();
}

setPaneIsOpen是一个状态，当设置为true时，将打开侧窗格。我想首先刷新页面，然后设置窗格。

我已经尝试了这个async/await承诺方法:

function refreshPagePromise() {
return new Promise<void>((resolve) => {
window.location.reload();
resolve();
});
}
async function refreshAndOpen() {
await refreshPagePromise();
setIsPaneOpen(true);
}
<button onClick={() => { refreshAndOpen(); }}>Click me</button>

但是我似乎无法处理页面重新加载。我尝试着创造一个代码沙盒，但是因为这非常复杂，所以我不能。如果我能复制，我会尝试在编辑中添加一个。

Answer 1

一个简单的方法是使用localStorage。

添加在页面加载时运行的useEffect:

useEffect(() => {
const shouldOpenPane = !!localStorage.getItem("setPaneOpen")
if(shouldOpenPane){
setIsPaneOpen(true);
// Maybe the row beneath should not be there, 
// Idk what behaviour u want if user reloads page manually
localStorage.removeItem("setPaneOpen")
}
}, []);

像这样更新你的按钮:

<button
onClick={() => {
localStorage.setItem("setPaneOpen", "true"); // can be set to any thruthy value
refreshPage();
}}
>
Click me
</button>