Question

作为对我的post here的后续问题，我现在实现了FLUX存储以处理状态。但是，由于我的应用程序执行了多次重定向到外部站点的操作，因此我在FLUX存储中使用本地存储来保留状态。本地存储值和FLUX存储都已正确更新。我遇到的唯一问题是将更新后的状态值保存到我的UI中。在我的组件中，我尝试了挂载方法：

this.state = getFluxState();

和

this.setState(getFluxState());

但是似乎都不起作用。我已经浏览了许多其他有关此问题的文章，但是找不到适合我的解决方案。由于我对REACT还是很陌生，所以我希望有人可以给我一些启示或为我指明正确的方向？

在我的组件中，我有几个需要状态值的文本区域，如下所示。

<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();

REACT助焊剂状态未更新UI

0 个答案: