为 React-Admin 注销过程添加延迟

Question

我在我的 React-Admin 应用程序中实现了 AuthProvider.js，我想将注销过程延迟 5 秒，并在这段时间内显示一个模式，显示“注销...”。

对于上下文，这是来自 docs 的示例：

logout: () => {
    localStorage.removeItem('username');
    return Promise.resolve();
},

我已使用以下代码将 AuthProvider.js 设置为将注销过程延迟几秒：

logout: () => {

    // [add code here to show a modal]

    return new Promise(resolve => {
        setTimeout(() => {

            localStorage.removeItem('username');

            // [add code here to hide the modal]

            resolve();
        }, 5000); // add a delay of 5 seconds
    });
},

有什么方法可以在延迟期间向用户显示某种模式（请参阅“在此处添加代码”注释）？

Answer 1

我认为你可以添加一些这样的状态

logout: () => {

const [isLoggingOut, setIsLoggingOut] = useState(false);

// Function to show the modal
const showModal = () => {
  setIsLoggingOut(true);
};

// Function to hide the modal
const hideModal = () => {
  setIsLoggingOut(false);
};

showModal(); // Show the modal when logout is initiated

return new Promise(resolve => {
    setTimeout(() => {

        localStorage.removeItem('username');

        hideModal(); // Hide the modal after the delay

        resolve();
    }, 5000); // add a delay of 5 seconds
}); }

然后创建一个模态组件，根据 isLoggingOut 的值有条件地渲染。