React/Flux/React路由器:如何在重新路由时调用以存储数据

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

本文关键字：React 路由 数据 存储 调用 新路由 路由器 Flux      更新时间：2023-09-26

工具：React 0.14.0、Vanilla Flux和React Router

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

例如：一个简单路由

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

组件1（IndexRoute）和组件2使用来自存储的相同数据并初始化相同的

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技术来加载组件

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

相关文章：