REACT Flux не обновляет пользовательский интерфейс - PullRequest
0 голосов
/ 18 февраля 2020

Как дополнительный вопрос к моей публикации здесь , я теперь реализовал хранилище 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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...