Question

我怀疑我还没有能够谷歌出去但我有这个反应组件，我想使用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
        });
    }

});

Answer 1

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

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

作为per the docs：

Reflux.connect() mixin会检查商店是否有getInitialState 方法。如果找到，它将设置组件getInitialState

除非您的商店的初始状态在所有听众中都是一致的，否则我觉得使用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`
    }
});

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

1 个答案: