Question

我目前在我的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如何工作？

Answer 1

QGroupBox不适合放置它，因为render应该是纯粹的非常强大的惯例（即，它不应该修改组件＆＃39;国家）。

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

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

要真正健壮，您还需要处理在异步数据库查询完成之前卸载组件的情况，因为在未安装的组件上调用componentWillReceiveProps将触发警告。 here有一些建议的处理方法。

由于您使用的是react-router，另一个选择是从The React blog发出数据库查询，这样路由甚至无法转换，直到数据库查询完成。我没有这种方法的经验。

React router params更改触发器firebase查询

1 个答案: