首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react-router |如果组件状态发生变化,如何渲染Router

react-router |如果组件状态发生变化,如何渲染Router
EN

Stack Overflow用户
提问于 2016-01-04 04:36:10
回答 1查看 268关注 0票数 0

我有一个简单的main.js文件:

代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom';

import App from "./components/app";

ReactDOM.render(<App />,
    document.getElementById('appContainer')
);

App组件定义路由:

代码语言:javascript
复制
render(){
    console.log('app', this.state.current, this.state.global);
    return (
        <Router>
            <Route path="/" component={Template} current={this.state.current}>
                <IndexRoute component={GlobalList} global={this.state.global} />
                <Route path="current" component={CurrentList} current={this.state.current} />
                <Route path="item/:item" component={ItemDetail} />
            </Route>
        </Router>
    );
}

我使用re-base包与我的Firebase数据库通信。这个库不允许为一个端点对所有应用程序多次执行syncState。这就是为什么我在App组件中获取这些数据并希望将它们传递给路由的原因。这是一个问题。

render方法中的这个console.log被调用了4次。前两个给出空数据,第三个给出第一个端点,第四个给出第二个端点。但是路由不会更新。我可以在模板元素中看到,render方法也被调用了4次,但每次props.route.current都是一个空数组,即使在应用程序中this.state.current是长度大于0的数组。

如果有任何关于如何解决这个问题的建议,我将不胜感激。如果有其他方法可以做到这一点,我很乐意阅读任何好的实践提示。我使用最新版本的库,ES6和webpack/巴别塔来构建。

EN

回答 1

Stack Overflow用户

发布于 2016-01-05 03:59:19

有时,阅读所有的库文档是很好的。

感谢@TylerMcGinnis的耐心和没有使用苛刻的语言:)

这个问题的解决方案是使用bindToState方法,如果您只想将更改绑定到状态,而不是将更改发布到Firebase。这是我的情况--只有一个组件需要同步更改,第二个组件只需要监听第一个组件所做的更改。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34581304

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档