Как дополнительный вопрос к моей публикации здесь , я теперь реализовал хранилище FLUX для обработки состояния. Однако, поскольку мое приложение выполняет несколько перенаправлений на внешние сайты, я использую локальное хранилище в своем хранилище FLUX для сохранения состояния. Все значения локального хранилища обновляются должным образом, как и хранилище FLUX. Единственная проблема , с которой я сталкиваюсь - это получение обновленных значений состояния на мой пользовательский интерфейс . В моем компоненте сделал метод монтирования, который я попробовал:
this.state = getFluxState();
и
this.setState(getFluxState());
Но, похоже, не работает. Я просмотрел многие другие публикации на SO для этой проблемы, но я не смог найти решение, которое работало для меня. Поскольку я все еще очень новичок в РЕАКТ, я надеялся, что кто-то сможет пролить некоторый свет или направить меня в правильном направлении?
В моем компоненте у меня есть пара текстовых областей, которым нужно значение из состояния, они показано ниже.
<Input type="textarea" name="AzureAuthToken" id="AzureAuthToken" rows="5" readOnly
value={"" || this.state.AzureAuthToken}/>
<Input type="textarea" name="AzureJWT" id="AzureJWT" rows="10" readOnly
value={"" || this.state.AzureJWT}/>
Эти текстовые области не обновляются после того, как перенаправления происходят, даже если хранилище состояний имеет все правильные обновленные значения.
Мой код хранилища потоков показан ниже.
let _azureB2C = {
AzureAuthToken: localStorage.getItem("AzureAuthToken"),
AzureJWT: localStorage.getItem("AzureJWT"),
};
class AzureB2CStore extends EventEmitter {
//Code removed for brevity
getAzureB2CFlows() {
return _azureB2C;
}
}
hwDispatcher.register(action => {
case actionTypes.JWT_TOKEN_GRANTED:
_azureB2C.AzureJWT = action.AzureJWT;
localStorage.setItem("AzureJWT", action.AzureJWT);
azureB2CStore.emitChange();
break;
case actionTypes.AUTH_TOKEN_GRANTED:
_azureB2C.AzureAuthToken = action.AzureAuthToken;
localStorage.setItem("AzureAuthToken", action.AzureAuthToken);
azureB2CStore.emitChange();
break;
}
//Code removed for brevity
export default azureB2CStore;
Код моего компонента показан ниже.
function getFluxState() {
return azureB2CStore.getAzureB2CFlows();
}
class AzureB2C extends Component {
constructor(props) {
super(props);
this.state = getFluxState();