React 路由器参数更改触发 Firebase 查询答案

【问题标题】：React router params change trigger firebase queryReact 路由器参数更改触发 Firebase 查询
【发布时间】：2017-01-04 04:49:38
【问题描述】：

我目前在我的 React 应用程序中设置了一个路由器，它有一个带有查询参数的链接：

<Router history={hashHistory}>
  <Route path="/" component={Home} />
  <Route path="/details/:id" component={Details} />
</Router>

我想做的是在用户导航到详细信息页面（即/details/123）时查询我的firebase数据库。 Details 组件中的这段代码将是：

const id = this.props.params.id;
const rootRef = firebase.database().ref();
rootRef.orderByChild("id").equalTo(id).on("child_added", function (snapshot) {
  this.setState({
    user: snapshot.value()
  });
});

我应该将查询 firebase 数据库的代码放在哪里？我会认为它不应该进入渲染方法，因为它不属于那里，因为我正在设置状态 - 这是正确的吗？我尝试使用 componentWillReceiveProps 生命周期函数，但似乎没有被调用 - 我是否误解了生命周期以及 react-router 的工作原理？

【问题讨论】：

标签： reactjs firebase firebase-realtime-database react-router

【解决方案1】：

render 不是放置它的正确位置，因为有一个非常严格的约定，即 render 应该是纯的（即，它不应该修改组件的状态）。

componentWillReceiveProps 也不对，因为componentWillReceiveProps is not called when a component first mounts。

加载必要状态的典型位置来自componentDidMount。（使用 componentWillMount 在技术上也可以工作，但是如果您正在执行服务器端渲染，那么 componentWillMount 将在服务器上执行，并且从服务器而不是客户端调度 AJAX 或数据库请求可能会导致问题。请参阅here。 )

为了真正健壮，您还需要处理在异步数据库查询完成之前卸载组件的情况，因为在卸载的组件上调用setState 会触发警告。 The React blog 有一些建议的技术来处理这个问题。

由于您使用的是 react-router，另一种选择是从 the route's onEnter event 发出您的数据库查询，这样在数据库查询完成之前路由甚至不会转换。我没有这种方法的经验。

【讨论】：

很棒的答案。谢谢。