javascript - React/Flux/React-Router : How to call to store data when re-routing?

Question

工具:React 0.14.0、Vanilla Flux 和 React-Router

在 IndexRoute 之外重新路由时，我遇到了问题。 -我不知道如何调用下一个组件的存储数据。

例如:简单的路由

<Route path="/" component={Main}>
    <IndexRoute component={Component1} />
    <Route path="newPath" component={Component2} />
</Route>

Component1(IndexRoute)和Component2使用相同的存储数据并初始化相同的

function getInitialState() {
    return {
      object1: null,
      object2: null,
      object3: null
   }
}

它们的更新方式相同:

function getStateFromStores() {
    return {
      object1: Store1.get(),
      object2: Store2.get(),
      object3: Store3.get(),
    }
}

问题:

但是 IndexRoute 肯定会调用 getStateFromStores()，因为它将监听初始加载到存储中的情况，但 Component2 在路由到时仍将为 null。

我不太确定的解决方案

如果我将存储设置为在空时返回“null”，我可以通过设置更改其初始化来使 Component2 使用其数据进行渲染，如下所示:

function getInitialState() {
    return {
        object1: Store1.get(),
        object2: Store2.get(),
        object3: Store3.get()
    }
}

我担心我的解决方案可能更像是一个黑客而不是一个解决方案，并且可能有一个通用的组件生命周期和/或 React-Router 技术来加载组件

Answer 1

您应该在 componentWillMount 而不是组件构造函数中执行此操作。该生命周期事件将让您有时间在组件挂载到 DOM 之前预填充本地状态。