Question

我有简单的main.js文件：

import React from 'react';
import ReactDOM from 'react-dom';

import App from "./components/app";

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

App组件定义路线：

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组件中获取这些数据并希望将它们传递给Routes。这是一个问题。

渲染方法中的console.log被调用4次。前两个给出空数据，第三个给出第一个端点和第二个端点。但是路线没有更新。我可以在Template元素中看到，渲染方法也被调用了4次，但每次props.route.current都是一个空数组，即使在App this.state.current中也是长度为＆gt;的数组。 0

我很感激任何提示如何解决这个问题。如果还有其他方法可以做到，我很乐意阅读任何好的做法提示。我使用最新版本的库，ES6和webpack / babel来构建。

Answer 1

有时阅读所有图书馆文档都很好。

感谢@TylerMcGinnis的耐心而不是用硬言辞：）

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

react-router |如果组件状态发生变化，如何渲染路由器

1 个答案: