阵营路由器PARAMS变化触发火力查询

我公司目前已经具有与查询参数的链接在我作出反应的应用程序设置路由器：阵营路由器PARAMS变化触发火力查询

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

我想要做的就是查询我的火力点数据库，当用户导航到详细信息页面（即/details/123）。此代码在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() 
    }); 
});

我会在哪里把那个查询火力数据库的代码？我会认为它不应该进入渲染方法，因为它不属于那里，因为我正在设置状态 - 这是正确的吗？我试过使用componentWillReceiveProps生命周期功能，但似乎并没有被调用 - 我误解了生命周期以及路由器如何工作？

来源

2016-08-27 Ben Thomas

render不适合放置它，因为有一个非常强大的约定，render应该是纯的（即，它不应该修改组件的状态）。

componentWillReceiveProps也是不正确的，因为componentWillReceivePropsis not called when a component first mounts。

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

要成为确实健壮，您还需要处理在异步数据库查询完成之前未安装组件的情况，因为在卸载的组件上调用setState会触发警告。 The React blog有一些处理该技术的建议技术。

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

来源

2016-08-27 19:16:25

梦幻般的答案。谢谢。 –

阵营路由器PARAMS变化触发火力查询

回答

相关问题