ReactJS和Reflux在组件安装之前监听商店-Java 学习之路

我有这个疑问，我还没有能够谷歌，但我有这个反应组件，我想使用componentWillMount（）方法使用回流存储更新它的状态 .

我能够更新商店中的状态，但是使用this.trigger从商店更新它的状态并没有给我更新状态的数据让我感到困惑 . 如何获取数据的更新状态 .

这是我的组件目前的样子

var Challenges = React.createClass({

    contextTypes: {

            router: React.PropTypes.func
    },

    mixins: [Reflux.connect(ChallengeStore,'challenges')],

    getInitialState: function() {
        return {
            challenges: []
        }
    }

    componentDidMount: function() {

            var trackId = this.props.params.trackId; // the url

            ChallengeActions.GetChallenges(trackId);

            console.log(this.state);

    },

    render: function () {

        return(
               <div>
                        <h1>{ this.state.challenges.title }</h1>                                    <List challenges={ this.state.challenges } />
            </div>
        );

    }

});

我的商店在这里

var ChallengeStore = Reflux.createStore({

    listenables: ChallengeActions,

    onGetChallenges: function(url) {

        var items = ChallengeService.getChallenges(url);

        this.trigger({
            challenges: items
        });
    }

});

1 回答

3
在本周找出Reflux的同时进入这个阶段 .

问题是 Reflux.connect 只连接商店似乎缺少的商店 getInitialState() .

如per the docs：

Reflux.connect（）mixin将检查商店是否有getInitialState方法 . 如果找到它将设置组件getInitialState

除非你的商店's initial state is consistent across all it'听众，我发现最好只使用 Reflux.listenTo() ：
```
var Status = React.createClass({
    mixins: [Reflux.listenTo(statusStore,"onStatusChange")],
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    render: function() {
        // render using `this.state.currentStatus`
    }
});
```
回复于 2024-05-02T09:25:41+08:00

ReactJS和Reflux在组件安装之前监听商店

1 回答

相关问题