Вернуть логическое значение из localForage getItem
import localForage from 'localforage';
import React from 'react';
import globalHook, { Store } from 'use-global-hook';
interface State {
isLoading: boolean;
isAuthenticated: boolean;
}
type Action = {
setIsLoading: (isLoading: boolean) => void;
setIsAuthenticated: (isAuthenticated: boolean) => void;
};
const authenticate = localForage
.getItem('token')
.then((value) => {
return value ? true : false;
})
.catch(function (err) {});
const initialState: State = {
isLoading: false,
isAuthenticated: false,
};
const actions = {
setIsLoading: (store: Store<State, Action>, isLoading: boolean) => {
store.setState({ ...store.state, isLoading });
},
setIsAuthenticated: (
store: Store<State, Action>,
isAuthenticated: boolean
) => {
store.setState({ ...store.state, isAuthenticated });
},
};
const useGlobal = globalHook<State, Action>(React, initialState, actions);
export default useGlobal;
Привет, я реализую функцию входа в систему в reactjs и использую localforage для хранения токенов. У меня есть состояние isAuthenticated в глобальном состоянии. Теперь я хотел изменить значение isAuthenticated initialValue либо на true, либо на false в зависимости от того, есть ли у localForage токен или нет. Таким образом, я хотел вернуть логическое значение, если localForage имеет значение или нет. Но теперь он возвращает обещание, а не логическое значение с localForage. Заранее благодарю за любую помощь
@buzatto Пытался объявить переменную, но ее область действия находится только в блоке then. Не могли бы вы показать свою реализацию?
Ответы 1
Я думаю, что ваша функция аутентификации немного неверна. Что бы я сделал, я бы сделал аутентификацию функции, а затем эта функция вызвала бы localForage, чтобы получить токен, который затем будет возвращен.
Я сделал быстрый пример, который работает с использованием localForage. Сначала я устанавливаю токен при рендеринге компонента, а затем получаю его из localForage. Затем он правильно отображает значение, и больше ничего делать не нужно. Пожалуйста, используйте это в качестве примера. Вы также можете найти его здесь
import React, { useState, useEffect } from "react";
import localForage from "localforage";
export default function App() {
const [token, setToken] = useState("");
const [error, setError] = useState(null);
const authenticate = () => {
return localForage
.getItem("token")
.then((value) => setToken(value))
.catch((err) => setError(err));
};
useEffect(() => {
localForage.setItem("token", "token123");
authenticate();
}, []);
return (
<div className = "App">
{error ? <p>Error {error}</p> : <p>Token: {token}</p>}
</div>
);
}
Когда вы возвращаете значение из цепочки промисов
then, вы фактически возвращаете промис, который может быть связан с другимиthen, у которых в качестве параметра возвращено значение. Чтобы установить внешнюю переменную, такую как аутентификация, вам нужно объявить как let снаружи, затем внутри, а затем цепочку, которую вы обновляете. В другом случае можно было бы использовать асинхронный/ожидающий подход, который позволяет вам ждать обещания для решения и установки для данной переменной.